Welcome to WebmasterWorld Guest from 54.197.171.28

Forum Moderators: open

Message Too Old, No Replies

Menu Rollover Image to Stay when on that page

rollover images

   
8:09 pm on Sep 7, 2013 (gmt 0)

5+ Year Member



Using rollover images in the nav menu in html page with Javascript. Once clicked a menu item and land on that page I would like to have that 2nd image stay, signifying where the user is. Updating a site, so the onmouseout tags are dated. Prefer to use images as client wants font control. Thanks for any help.
[snip]
<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>


In html doc:

<img src="image/spacer-blk.gif" width="9" height="36" border="0"><a href="audi-repair.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','image/audi-roll2.gif',1)"><img src="image/audi-roll1.gif" alt="Audi Repair & Service" name="Image3" width="97" height="36" border="0"></a><img src="image/spacer-blk.gif" width="246" height="36" border="0"><a href="volkswagen-repair.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','image/vw-roll2.gif',1)"><img src="image/vw-roll1.gif" alt="Volkswagen Service and Repair" name="Image5" width="264" height="36" border="0"></a><img src="image/spacer-blk.gif" width="140" height="36" border="0"><a href="porsche-repair.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','image/porsche-roll2.gif',1)"><img src="image/porsche-roll1.gif" alt="Porsche Service and Repair" name="Image7" width="185" height="36" border="0"></a><img src="image/spacer-blk.gif" width="9" height="36" border="0">

[edited by: incrediBILL at 1:00 am (utc) on Sep 8, 2013]
[edit reason] URls removed. Please see forum charter and TOS [/edit]

5:00 pm on Sep 9, 2013 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



There are generally three ways to handle this:

1) Server-side code which delivers the page (or at least the menu) styled according to present active page.

2) JavaScript which styles the menu based on, either, a) parsing of
location.href
or b) cookies set on each page load

3) CSS via ID on the
<body>
tag
3:31 am on Sep 10, 2013 (gmt 0)

5+ Year Member



I'll look in tot he JS and CSS. Thank you.