Adding mouseOver images on ListBased Menu Items

Poster: estebanms
Dated: Friday December 15 2006 - 15:12:14 GMT

I am in the progress of migrating an existing menu system (http://www.impressinprint.com) to the list-based menu system. How can I enable the top-level mouse over image functionality that is currently in place on the existing menu system. I have tried adding onMouseOver to several of the different elements, but nothing seems to work.

Poster: Ruth
Dated: Friday December 15 2006 - 21:19:49 GMT

Hi,

Since you are using listbased and the menu items are being created from the ul/li items I think the only way you could do images and mouseover images would be to set up those ul/li in some kind of span. There was a person who did a page matching with the list based menu, and perhaps the solution he found would work, but I don't know.

http://www.milonic.com/forum/viewtopic. ... 0111#40111

However, you can do background image mouseovers, but of course that is like setting up the offbgcolor and onbgcolors just with a bg image instead, and it sounds like you want different images as your items.

Have you considered setting up a list in noscript tags for those with js disabled and just using the regular menu for the site? I dont' know your reason for using the listmenu but if you want to have all the properties available in the menu and still have links for those without js that would serve, also.

Ruth

Found a great solution for this

Poster: estebanms
Dated: Wednesday December 20 2006 - 5:08:29 GMT

I played around with this a bit, and found a great solution. I noticed that Milonic simply strips out the text between the <A> tags and places it as the "text" value of their "aI" call. So instead of placing the text for the menu item I wanted I did the following:

<LI><A href="#">;image=/images/image.gif;overimage=/images/imageon.gif;</A></LI>

This caused Milonic to create an aI() call that looked something like:

aI(text=;image=/images/image.gif;overimage=/images/imageon.gif;)

Which gave me the expected behavior of producing a image menu item with a mouse over image replacement. The key to finding this was using Firefox's built in DOM model viewer to see that what Milonic does behind the scenes is use the list items to construct the Javascript typically used by Milonic in the menu_data.js file.

Poster: Ruth
Dated: Wednesday December 20 2006 - 5:29:11 GMT

Hi,

I want to thank you very much for posting this solution. This is a terrific help to other users, and it's great for me Now I know how to do that and can help others with it.

Thanks again, we really appreciate solution posts like this that help everyone.

I'm going to experiment, maybe other things can be used also

Ruth