homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Menu Rollover Image to Stay when on that page
rollover images

5+ Year Member

Msg#: 4608151 posted 8:09 pm on Sep 7, 2013 (gmt 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]



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

Msg#: 4608151 posted 5:00 pm on Sep 9, 2013 (gmt 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
location.href or b) cookies set on each page load

3) CSS via ID on the
<body> tag

5+ Year Member

Msg#: 4608151 posted 3:31 am on Sep 10, 2013 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved