Adding mouseOver images on ListBased Menu Items

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
estebanms
Beginner
Beginner
Posts: 9
Joined: Thu Dec 14, 2006 5:54 am

Adding mouseOver images on ListBased Menu Items

Post by estebanms »

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.
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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.

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
estebanms
Beginner
Beginner
Posts: 9
Joined: Thu Dec 14, 2006 5:54 am

Found a great solution for this

Post by estebanms »

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.
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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