Hi everyone,

 

Ive used this code to get a hoverover image on my navbar which is a Unordered list,

<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>

and then for each of the li items, this is what i've done

    <li> <a href="order.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Order','','Images/order2.png',1)"><img src="Images/order.png" name="Order" width="72" height="54" border="0" id="Order" /></a></li>

 

But my problem is that when I try to apply the CSS rules to highlight the current page, it doesnt work! Can anyone shed some light please?

 

Cheers

not sure what all the javascript means but you can give the body of each page an id...

 

body#page_home li#home a {color: #000}
body#page_about li#about a {color: #000}

 

are you animating the hover or is it just a straight image swap? if it's the latter you could just use the css :hover property rather than javascript. sorry if i've misunderstood.

I agree with Mr P, you can just use the :hover state in css instead of using javascript. A quick google brought up this tutorial.

coolio thanks guys.