View Full Version : how to add a rollover image effect to an existing vertical menu bar

09-09-2011, 02:26 PM

I know that to create a rollover image effect you must have to same size images. The first image will show when the page is first loaded and the background image will show when the user hover the mouse over it.

How can I do this to an existing spry vertical menu bar?
1. how can i insert the first image?
2. how can i place the background image?
here is my website

www.rentajumperfl.com (http://www.rentajumperfl.com)

thank you,

09-10-2011, 03:34 AM
Sorry to be give you bad news but trying to use images for links in a Spry Menubar is quite complex and something I recommend against.

09-10-2011, 08:35 PM
thank you for your reply.

then, what is the best way to create a menu bar with custom images? or custom buttons?

I did add background images to my menu bar and when the cursor hovers over it it changes. Is this appropiate?

09-10-2011, 08:46 PM
Sorry I might have misunderstood you. Using a background image in a Spry menubar and having it change ob rollover is fine. I do that occasionally but I still use text for the text of the link. So I don't have to create individual images and style rules for each link. The only problem that sometimes arises is when the text link wraps to a second line and the background image doesn't work for two lines.

09-10-2011, 09:05 PM
just for future reference. If I have a set of custom made buttons (images), what would be a good way to create a menu bar with them?

09-11-2011, 09:31 PM
If you make a UL/LI list you can use a background image that consist of all the button graphics needed.

(first make sure the list is outputting right, either horizontal or vertical)
1. Set a width and height on each link.
2. Give each link a unique ID.
3. For each link use the same background image, but only show the part of the background that is appropriate for the link. (background-position)
4. Change the background-position for each link on :hover.

This approach requires some CSS skills, but it uses only one image for all the navigation 'buttons', which speeds up loading time and makes creating the menu bar more easy.

09-12-2011, 07:51 PM
For a tutorial check out http://www.dreamweavertutorial.co.uk...reamweaver.htm (http://www.dreamweavertutorial.co.uk/dreamweaver/video/drop-down-css-menu-dreamweaver.htm)