Results 1 to 2 of 2

Thread: DD Tab Menu-Top level image rollovers not working

  1. #1
    Join Date
    Apr 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DD Tab Menu-Top level image rollovers not working

    1) Script Title: Script: DD Tab Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

    3) Describe problem: The sub navigation is showing fine, but I have a simple javascript rollover I am using for the top navigation buttons that is not working. nav01.gif is not swapping nav01x.gif on mouseover.

    Here is the menu HTML code
    Code:
    <div id="ddtabs1" class="basictab">
    <ul>
    <li><a href="#" onmouseover="btn1.src='fpv_img/nav/nav01x.gif';" onmouseout="btn1.src='fpv_img/nav/nav01.gif';" rel="sc1"><img name="btn1" src="fpv_img/nav/nav01.gif" alt="Cards" border="0" /></a></li>
    <li><a href="#" onmouseover="btn2.src='fpv_img/nav/nav02x.gif';" onmouseout="btn2.src='fpv_img/nav/nav02.gif';" ><img name="btn2" src="fpv_img/nav/nav02.gif" alt="FAQ's" border="0" /></a></li>
    <li><a href="#" onmouseover="btn3.src='fpv_img/nav/nav03x.gif';" onmouseout="btn3.src='fpv_img/nav/nav03.gif';" ><img name="btn3" src="fpv_img/nav/nav03.gif" alt="Rewards" border="0" /></a></li>
    <li><a href="#" onmouseover="btn4.src='fpv_img/nav/nav04x.gif';" onmouseout="btn4.src='fpv_img/nav/nav04.gif';" rel="sc2"><img name="btn4" src="fpv_img/nav/nav04.gif" alt="My Account" border="0" /></a></li>
    <li><a href="contact.cfm" onmouseover="btn5.src='fpv_img/nav/nav05x.gif';" onmouseout="btn5.src='fpv_img/nav/nav05.gif';" ><img name="btn5" src="fpv_img/nav/nav05.gif" alt="Contact" border="0" /></a></li>
    </ul>
    </div>
    This is the code from the head of the page
    Code:
    <link rel="stylesheet" type="text/css" href="fpv_css/ddtabmenu.css" />
    
    <script type="text/javascript" src="fpv_js/ddtabmenu.js">
    /***********************************************
    * DD Tab Menu script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    </script>
    
    <script type="text/javascript">ddtabmenu.definemenu("ddtabs1", "auto")</script>
    I have found that the rollovers will work if the .definemenu call is removed (<script type="text/javascript">ddtabmenu.definemenu("ddtabs1", "auto")</script>), but of course this piece is needed for the menu to work.

    Has anyone else experienced this issue?

    I am sorry, but I cannot post a link at this time to the page due to confidentiality. I will work on making a safe version I can post if this would help.

    Thanks a ton!
    Brent

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The script overwrites some existing mouse events hard coded for the links. So, instead of hard coding the rollover events to the links, hard code them to the images themselves. For example, instead of something like this:

    Code:
    <li><a href="#" 
    onmouseover="btn1.src='fpv_img/nav/nav01x.gif';" 
    onmouseout="btn1.src='fpv_img/nav/nav01.gif';" 
    rel="sc1"><img name="btn1" 
    src="fpv_img/nav/nav01.gif" alt="Cards" border="0" /></a></li>
    Do it like so:

    Code:
    <li><a href="#" 
    rel="sc1"><img name="btn1" 
    onmouseover="btn1.src='fpv_img/nav/nav01x.gif';" 
    onmouseout="btn1.src='fpv_img/nav/nav01.gif';" 
    src="fpv_img/nav/nav01.gif" alt="Cards" border="0" /></a></li>
    At that rate though, you no longer need the name - this will do:

    Code:
    <li><a href="#" 
    rel="sc1"><img  
    onmouseover="this.src='fpv_img/nav/nav01x.gif';" 
    onmouseout="this.src='fpv_img/nav/nav01.gif';" 
    src="fpv_img/nav/nav01.gif" alt="Cards" border="0" /></a></li>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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