Anylink Dropdown Menu with Rollovers?

[chesthare]

AnyLink Dropdown Menu: http://www.dynamicdrive.com/dynamici...pmenuindex.htm

I am trying to get rollovers to work with my AnyLink dropdown menu, so that on rollover you will see a new image and onclick you will get the dropdown menu.

While the menu works perfectly, the rollover does not.

ie: http://www.onceuponatime.co.ca/main.html (the last two buttons on the menubar on the left)

<div id="layer14">
			
<a onmouseover="changeImages('/images/stones2.gif','images/stones2.gif');return true" href="default2.htm" onClick="return dropdownmenu(this, event, menu1, '100px')" onMouseout="delayhidemenu();return true">

<img id="stones" src="images/stones.gif" alt="Click." name="rocks" height="35" width="148" border="0"></a></div>

[jscheuer1]

The code fragment in your post does not match that on the page for div #14. Neither version matches the general template of the other working rollovers:

working template:

			<div id="layer12">
				<a onmouseover="changeImages('pisces','images/pisces2.gif');return true" onmouseout="changeImages('pisces','images/pisces.gif');return true" href="#"><img id="pisces" src="images/pisces.gif" alt="" name="pisces" height="35" width="120" border="0"></a></div>

translated to stones with drop down code added:

			<div id="layer14">
			
<a onmouseover="changeImages('stones','images/stones2.gif');return true" href="default2.htm" onclick="return dropdownmenu(this, event, menu1, '100px');" onmouseout="changeImages('stones','images/stones.gif');delayhidemenu();return true">

<img id="stones" src="images/stones.gif" alt="Click." name="stones" height="35" width="148" border="0"></a></div>

Notes:

1 ) The use of 'return true;' or 'return false;' with an assigned event for which there is no competing default browser behavior is usually not needed. So the 'return true;' added to the onmouseover and onmouseout events is probably unnecessary. The onclick event however, does compete with the default browser behavior of loading the page named in the tag's href attribute. In this case, 'return false;' would be standard except the script handles that for you. So you can go with:

			<div id="layer14">
			
<a onmouseover="changeImages('stones','images/stones2.gif');" href="default2.htm" onclick="return dropdownmenu(this, event, menu1, '100px');" onmouseout="changeImages('stones','images/stones.gif');delayhidemenu();">

<img id="stones" src="images/stones.gif" alt="Click." name="stones" height="35" width="148" border="0"></a></div>

2 ) This small script references a non-existent array and therefore throws an error (code starting on line 440 of main.html):

<script type="text/javascript">
for (i=1; i<Math.floor(galleryarray.length/totalslots+2); i++)
document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ')
document.getElementById("navlink1").className="current"
</script>

Either construct an array for it that works with it or, get rid of it.