Rollover not working in IE

Get Started
1

Hi

Please could you tell me what idiot thing I’m doing wrong? My rollovers don’t seem to be working in IE8 but work perfectly in Chrome and Firefox. The previous version of the site worked beautifully, but now I’m updating it, it’s fallen apart.

To save you trawling through pages of code on the full site, I’ve simplified the problem in a test page:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Untitled Document</title>
<script type=“text/javascript”>
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onload=“MM_preloadImages(‘images/buttons/home_hov.jpg’)”>
<a href=“index.html” onmouseout=“MM_swapImgRestore()” onmouseover=“MM_swapImage(‘home’,‘’,‘images/buttons/home_hov.jpg’,1)”><img src=“images/buttons/home_up.jpg” name=“home” width=“35” height=“20” border=“0” id=“home” /></a>
</body>
</html>

The HOME button should darken on rollover. But sadly it just sits there, looking at me!

If it helps, the original site, where everything was working, is at www.lickens.co.uk

Many thanks!

13adger

2

what error messages are you getting

3

Ok this is embarrassing! But I’ll admit to it to help any other newbies out there. The problem was actually in the Dreamweaver preview system. Once I actually posted the site online, it worked perfectly!

Der

Thanks Webdev, it was your question that triggered me to upload it to get the correct error message, so in a way you solved it!

4

HI,

You don’t need that mass of outdated code and javascript to do a simple rollover. :slight_smile:

Here’s an example using css only:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image Rollover</title>
<style type="text/css">
a { text-decoration:none; }
.roll img { border:none; }
a.roll:hover { visibility:visible }
a.roll:hover img {
	width:0;
	height:0;
	overflow:hidden;
	padding:20px 0 0 35px;/* height and width of image */
	background: url(images/buttons/home_hov.jpg) no-repeat 0 0;/* your rollover image */
}
</style>
</head>
<body>
<p><a class="roll" href="index.html"><img  src="images/buttons/home_up.jpg" width="35" height="20" alt="Home" id="home" /></a></p>
</div>
</body>
</html>
5

Oh that’s so much nicer!

Thank you