CODEWITHSUNDEEP
javascripthtml
stighy
stighy

Reputation: 7170

HTML rollover button image: how to do with Internet Explorer?

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 ?

Upvotes: 0

Views: 5502

Answers (5)

amiregelz
amiregelz

Reputation: 1875

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.

Upvotes: 1

EmC2
EmC2

Reputation: 1

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.

Upvotes: 0

renatomoya
renatomoya

Reputation: 31

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.

Upvotes: 0

evan
evan

Reputation: 12553

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>

Upvotes: 0

user1350140
user1350140

Reputation: 

onmouseover="this.src='p2.png'"

Use this instead of document.images....

Upvotes: 0

Related Questions