Welcome to WebmasterWorld Guest from

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)

Junior Member

5+ Year Member

joined:Feb 16, 2009
posts: 55
votes: 0

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.
<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];}

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 Sept 9, 2013 (gmt 0)

Senior Member

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

joined:Mar 15, 2002
votes: 0

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
or b) cookies set on each page load

3) CSS via ID on the
3:31 am on Sept 10, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:Feb 16, 2009
posts: 55
votes: 0

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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members