...

View Full Version : Please help with a javascript rollover problem



Oceansong
06-19-2009, 05:04 AM
I am trying to get to the bottom of a javascript rollover issue on an old website I'm trying to repair until a new one is done. The rollover effect should pull up the second image but shows an empty box instead. The code shows 3 functions:

<CODE>
<script language="JavaScript" type="text/javascript">
<!--
this.window.name='main';

function mOver(button,im){
img_switch(button,'on',im);
}

function mOut(button,im){
img_switch(button,'off',im);
}

function img_switch(imgName,status,im) {
if (parseFloat(navigator.appVersion)>3.0) {// keep older browsers happy
imgfile = "images/nav_mouseover/" + imgName + "_" + status + ".gif";
document.images[im+1].src = imgfile;
}
}
</CODE>

Then its navigation code is:

<CODE>
<!--navigation-->
<img src="images/nav_mouseover/tehama_header.gif" width="162" height="50"><br>

<img src="images/nav_mouseover/bottle_neck.gif" width="110" height="184"><br>
<a href="index.shtml" target="_parent" onMouseOver="mOver('home',1)" onMouseOut="mOut('home',1)">
<img src="images/nav_mouseover/home_off.gif" width="110" height="20" border="0"></a><br>
<a href="our_oils.shtml" onMouseOver="mOver('our_oils',2)" onMouseOut="mOut('our_oils',2)">
<img src="images/nav_mouseover/our_oils_off.gif" width="110" height="20" border="0"></a><br>
<a href="buy_direct.shtml" onMouseOver="mOver('buy_direct',3)" onMouseOut="mOut('buy_direct',3)">
<img src="images/nav_mouseover/buy_direct_off.gif" width="110" height="20" border="0"></a><br>
<a href="newsletter.shtml" onMouseOver="mOver('newsletter',4)" onMouseOut="mOut('newsletter',4)">
<img src="images/nav_mouseover/newsletter_off.gif" width="110" height="20" border="0"></a><br>
<a href="about_us.shtml" onMouseOver="mOver('about_us',5)" onMouseOut="mOut('about_us',5)">
<img src="images/nav_mouseover/about_us_off.gif" width="110" height="20" border="0"></a><br>
<a href="links.shtml" onMouseOver="mOver('links',6)" onMouseOut="mOut('links',6)">
<img src="images/nav_mouseover/links_off.gif" width="110" height="20" border="0"></a><br>
<img src="images/nav_mouseover/bottle_bottom.gif" width="110" height="69"><br>

<img src="images/nav_mouseover/tehama_footer.gif" width="162" height="50"><br><br>
<img src="images/CCOF_weblogo.gif" width="87" height="102"><br><BR>
<img src="images/koshersmall.gif" width="149" height="108"><br>
<img src="images/blank.gif" border="0" width="1" height="200"><br>


</td>
</CODE>

Any suggestions anyone has I would greatly appreciate. Thanks so much.

Old Pedant
06-20-2009, 12:29 AM
Well, not to ask a dumbass question...*DO* you indeed HAVE images named

images/nav_mouseover/home_on.gif
????

The use of document.images[im+1].src seems fraught with peril, to me. If you add another <img> tag to your page, the "+1" will surely be wrong.

I think you'd be better off passing this

Thus:


function mOver(button,where)
{
img_switch(button,'on',where);
}

function mOut(button,where)
{
img_switch(button,'off',where);
}

function img_switch(imgName,status,where)
{
if (parseFloat(navigator.appVersion) <= 3.0) return;
imgfile = "images/nav_mouseover/" + imgName + "_" + status + ".gif";
alert( "using " + imgfile ); // remove after debugging

where.getElementsByTagName("IMG")[0].src = imgfile;
}

...

<a href="index.shtml" target="_parent"
onMouseOver="mOver('home',this)"
onMouseOut="mOut('home',this)">
<img src="images/nav_mouseover/home_off.gif" width="110" height="20" border="0">
</a>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum