DD Tab Menu-Top level image rollovers not working

[BrentGrill]

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


<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


<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

[jscheuer1]

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:


<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:


<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:


<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>