Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Location
    Elmira Oregon
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please help with a javascript rollover problem

    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.
    Last edited by Oceansong; 06-19-2009 at 06:07 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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:
    Code:
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •