i've this simple piece of code that don't work in Internet Explorer, but do work in Chrome, Firefox etc.
It is a simple button image 'rollover' .
<html>
<head>
</head>
<body>
<img src="p1.png" name="img1" onMouseOver="document.images[0].src='p2.png'" onMouseOut="document.images[0].src='p1.png'" ></a>
</body>
</html>
What's wrong in IE 6,7,8 ?
Change your code to this:
<html>
<head>
</head>
<body>
<img src="p1.png" name="img1" onMouseOver="this.src='p2.png'" onMouseOut="this.src='p1.png'" />
</body>
</html>
Also, I if your HTML page contains more data the the HTML page you've showed in your question, I suggest you put this code in the beginning of the <body> in order to preload the rollover image so there will be no delay when you want the rollover to work (otherwise, the rollover image will be downloaded to the user's device only when he hovers the image, causing a slight delay to the rollover (depending on the onMouseOver image size)):
<img src="p2.png" class="hiddenPic" />
<!-- loading (hidden) rollover image before all the other page data -->
And add the CSS hiddenPic class code: .hiddenPic { display: none; }
Other methods to preload the rollover image can be done using CSS or the JavaScript onLoad event handler.
onmouseover="this.src='p2.png'"
Use this instead of document.images....
Another method (works if you need to rollover change something else as well):
<img src="p1.png" name="img3" id="img3" onMouseOver="document.getElementById('img3').src='p2.png'" onMouseOut="document.getElementById('img3').src='p1.png'" >
http://jsfiddle.net/DNtUY/5/ (3 examples, yours, Said's, this one).
PS. Your open tag is <img ...> but the close tag is </a>
Maybe if the images are not that heavy, you might try a different approach like declaring both images and hide one of them. Then with javascript when you roll over the visible image, you hide it and show the other one.
Perfectly working code for your question mr.Stighy:
<html>
<head>
<style type="text/css">
</head>
<body>
<img src="../a_b_c/a.jpg" alt="" onMouseOver="this.src='b.jpg'" onMouseOut="this.src='a.jpg'" onClick="this.src='c.jpg'" class="style1"></a>
</body>
</html>
I think we messed up with the images, that's it... p.s. Giulio is waching you.
Related
Here is my manifest.json file:
{
"browser_action" :
{
"default_icon" : "Assets/Chromium logosu.png",
"default_popup" : "main.html"
},
"description" : "Bu eklenti, Chromium'un güncelleştirmelerini denetler ve yükler.",
"manifest_version" : 2,
"name" : "Chromium Güncelleştirici",
"version" : "1.0"
}
And here is my main.html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 16 - https://www.wysiwygwebbuilder.com">
<link href="Chromium_Güncelleştirici_Eklenti_Projesi.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="wb_Image1" style="position:absolute;left:0px;top:0px;width:320px;height:50px;z-index:0;">
<img src="Assets/Başlık.png" id="Image1" alt=""></div>
<div id="wb_Image7" style="position:absolute;left:0px;top:160px;width:320px;height:35px;z-index:1;">
<img src="Assets/Telif Hakkı Metni.png" id="Image7" alt=""></div>
<div id="wb_Image2" style="position:absolute;left:0px;top:50px;width:320px;height:37px;z-index:2;">
<img src="Assets/Güncelleştirmeleri Denetle (Pasif).png" id="Image2" alt=""></div>
<div id="wb_Image3" style="position:absolute;left:0px;top:87px;width:320px;height:36px;z-index:3;">
<img src="Assets/Ayarlar (Pasif).png" id="Image3" alt=""></div>
<div id="wb_Image4" style="position:absolute;left:0px;top:123px;width:320px;height:37px;z-index:4;">
<img src="Assets/Hakkında (Pasif).png" id="Image4" alt=""></div>
</body>
</html>
When I click the extension's button, I get this:
My extension's popup menu
Actually, my popup page should be shown like this:
The UI of my popup file
So, what should I do in order to fix this issue?
Popup html takes height and width from the content of the html loaded.
In your case, all div elements inside body are position:absolute, which results in zero height and width to body tag, and hence the Popup UI appears as a small box when loaded as browser action popup.
You can verify this behaviour by giving fixed height or width to tag in your css.
Why it appears fine when main.html loaded directly to browser?
It actually appears fine, but over here as well the body results in zero height, but because the viewport is not depended on the content of body, it shows the content outside the body as depicted in sample screenshot below.
How to fix?
Fix your CSS such that body gets overall height of the actual content that you need to show. Not sure why every element here you have placed as position absolute, I feel you can avoid that approach and still get the UI as expected by you.
Worst case, you can hardcode the body with fixed height and width of what you need the actual popup html size to be.
#Junaid Hamza
Ok, I have fixed my issue via doing these things:
1- First of all, I have removed all of "position:absolute;"s. But, when I did this, I encountered another issue. This time, the order of images was broken.
2- In order to fix the second issue, I have used a weird method. I have merged last three images into one image.
Anyway, thank you for your answer.😊
I have built a website and now wanting to add a slide on load feature on a few content pages, not the entire site.
I have tried using Barba.js transition but it's not working. I'm not sure if it's conflicted with the jQuery scripts I already have on my website or not.
Is there an easier way for me to create this form of sliding transition between pages not sections or divs just the html pages (index.html > about-us.html and so on...)?
<!DOCTYPE html>
<html>
<body>
<img src="ADD YOUR IMAGE" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
</body>
</html>
Try with this example and If you need for this all the pages just add this to the all pages too.
I'm struck in a project, I need to develop a project as agenty chrome extension, where it uses point and click css selector. First I have used iframe to display a site but I faced cross origin and security issues. Now I'm using object tag to display a site and I want to make like point and click css selector on a button click.
Here is my sample code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$('#dragit').click(function(){
// make $("#dvSource") to point and click css selector
});
});
</script>
</head>
<body>
<input type="submit" id="dragit" value="DragValues" />
<div id="dvSource">
<object type="text/html" data="http://validator.w3.org/" width="100%" height="600px" id="test">
</object>
</div>
</body>
</html>
I have placed in div (dvSource) and I have a button with id dragit, once I click that button I want to make point and click css selector for dvSource content
enlarging an image in a new window when a user clicks on it. Here's the Javascript I used:
<html>
<head>
<SCRIPT language="JavaScript">
<!--
function PopUp(pPage) {
window.open(pPage,'popWin','resizable=yes,scrollbars=yes,width=580,height=460,toolbar=no');
}
//-->
</SCRIPT>
</head>
<body>
<img src="thumbnail.jpg" alt="" border=0>
</body>
</html>
This has worked great for me but I need to have the large image in the new window centered. I've tried adding "align=center" to various parts of both the part of the code as well as the part of the code. Nothing has worked.
You have to load a HTML document to achieve that. You are loading only a plain images. In this case, you have no influence to its position, because the browser only renders an image.
Ok, lets say I go to http://www.google.com/intl/en_ALL/images/logo.gif , which is not really a document, but an image, iin my browser. Does it still have a document object? Can I use javascript: in my location bar? Wha'ts the deal with this? Thanks.
A quick look with Firebug reveals that yes indeed, there is a DOM and a document object. For example, javascript:alert(document.title) in the location bar gives "logo.gif (GIF Image, 276x110 pixels)". This results from the construction of the following document by the browser:
<html>
<head>
<title>logo.gif (GIF Image, 276x110 pixels)</title>
</head>
<body>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="http://www.google.com/intl/en_ALL/images/logo.gif"/>
</body>
</html>
This is also true in Chrome (with a slightly different string for the title); the HTML is
<html>
<body style="margin: 0px;">
<img style="-webkit-user-select: none" src="http://www.google.com/intl/en_ALL/images/logo.gif">
</body>
</html>
In IE, it appears that document.title is empty, but javascript:alert(document.body.clientWidth) gives a result equal to the client area of the browser, so it looks like there's a DOM there as well. The HTML is as follows:
<html>
<head>
<title></title>
</head>
<body>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" complete="complete"/>
</body>
</html>
It depends on the browser. If you go to that URL in firefox, for example, and open the DOM Inspector, you will see an html, body and img tag; also, typing javascript:alert(document) in the location bar will alert [object ImageDocument]. IE8 exhibits similar behaviour (but alerts just [object]).
no... the browser simply acts as a picture viewer