AnyLink image change onmouseover

1) Script Title: AnyLink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem: Please see my temp page at http://feminineliving.com/temp_new/index.html. The drop down is under "Classes" at the top.

How do I get the menu images to change onmouseoever, just like the the non drop down menu images?

Thank you for your help,

Todd

on all your other links you have

onmouseover="document.mmbout.src='images/menu/mainmenu_boutique_mo.png'"

Where as on the one with the drop down you have
onMouseover="dropdownmenu(this, event, menu3, '')"

you need to put the two together. (maybe someone can correct me on it)
not sure about this but it would be something close to this
onMouseover="dropdownmenu(this, event, menu3, '')", "document.mmblog.src='images/menu/mainmenu_blog_mo.png'"

Close dirt_Diver. :) To define multiple actions within an event handler, you'd separate them using a semicolon. So something like:

Code:

---

<td width="83"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, ''); document.images.myimage.src='over.gif'" onMouseout="delayhidemenu(); document.images.myimage.src='out.gif'"><img name="myimage" src="images/menu/mainmenu_classes.png" width="83" border="0"/></a></td>

---

Quote:

---

Originally Posted by ddadmin

Close dirt_Diver. :) To define multiple actions within an event handler, you'd separate them using a semicolon. So something like:

Code:

---

<td width="83"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, ''); document.images.myimage.src='over.gif'" onMouseout="delayhidemenu(); document.images.myimage.src='out.gif'"><img name="myimage" src="images/menu/mainmenu_classes.png" width="83" border="0"/></a></td>

---

---

ahhh yes, now I remember thanks.

Thank you DDAdmin and Dirt Diver,

I made the change DD suggested, you can see it here:
http://feminineliving.com/temp_new/index.html.

I wasn't sure this was going to work, because the onmouseout images for the drop down menu (listed as menu 3 in my code) are defined in the beginning of the script and not in the HTML body. So I would think that the onmouseover images would need to be defined in the script section as well.

When you view the source for the above link, you can see that I made the changes in the body, but the menu choices in the drop down (Class 1, Class 2, Class 3, and Class 4) are still not changing to their corresponding highlighted images.

Thanks again,

Todd

Hi DDAdmin,

I was still not able to get the image change onmouseover to work on the drop down after applying the change you suggested. I posted this earlier, but don't think I was very clear in my post.

The change you suggested was to the code in the HTML body. But the images for the drop down are specified in the script section - so shouldn't the change be made there? I have made several attempts at modifying the script code but to no success.

Thank you,

Todd

Actually, looking at your HTML, the implementation should work. However, I noticed the image path you've specified for the mouse over effect is invalid:

Code:

---

                <td width="83"><a href="#" onClick="return clickreturnvalue()"
                onMouseover="dropdownmenu(this, event, menu3, ''); document.images.mmclass.src='images/menu/mainmenu_classes_mo.png'"
                onMouseout="delayhidemenu(); document.images.mmclass.src='images/menu/mainmenu_classes.png'"><img name="mmclass"
                src="images/menu/mainmenu_classes.png" width="83" border="0"/></a></td>

---

Trying to call up http://feminineliving.com/temp_new/i...classes_mo.png returns a 404 error.

It returns a 404 because the main drop down button, "Classes" is not a menu choice, it's only at the top of the drop down. What I will do today is create that PNG and see if it works.

Thanks again for all your help DD.

Hi DD,

OK, I created the missing image, and now it highlights on mouseover, but the drop downs still don't highlight.

Is there something I'm doing incorrectly or am I missing something?

Well, the main menu item "Classes" now turns yellow onmouseover, so that seems to work now. If you're asking how to also get the individual image links within the drop down menu to change images, you'll need to repeat what you did for the "Classes" link, but inside each of menu contents within the script, something like:

Code:

---

//Contents for menu 3
var menu3=new Array()
"
"
menu3[0]='<a href="http://feminineliving.com/classes/class_1.html" onMouseover=\"document.images.uniquevar1.src='images/menu/over.png'\" onMouseout=\"document.images.uniquevar1.src='images/menu/out.png'\"><img name="uniquevar1" src="images/menu/mainmenu_class 1.png" alt="" width="83" height="46" border="0"></a>'

---

Hi DD,

OK, I dropped in the latest change you suggested. I got java script errors in my HTML editor, and on-line the drop down doesn't work. But you can still see the change I made when you view page source.

I am now suspecting that this is very close but that there is only a syntax error in the way from this working properly. My first assumption was the placement and ordering of the back slashes. I tried moving them but to no success.

Do you have any thoughts on the syntax?

Thank you again, DD,

Ah yes, the backslashes in the last code I posted should be for the single apostrophes (not double):

Code:

---

menu3[0]='<a href="http://feminineliving.com/classes/class_1.html" onMouseover="document.images.uniquevar1.src=\'images/menu/mainmenu_class 1_mo.png\'" onMouseout="document.images.uniquevar1.src=\'images/menu/mainmenu_class 1.png\'"><img name="uniquevar1" src="images/menu/mainmenu_class 1.png" alt="" width="83" height="46" border="0"></a>'

---

DD, you are amazing! That fixed it!!!

Take a look - http://feminineliving.com/temp_new/index.html.

Thank you so much for all your help!

Todd