View Full Version : Spry menu bar -How to do an image rollover

07-22-2010, 11:17 PM
Hello: I'm very new to dreamweaver...and I have a vertical menu bar i created using spry.

Each menu item consists of an image and then a word: (see pic)

<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="index.html" class="MenuBarActive style1">
<img src="images/smallpaw.jpg" alt="Home" width="24" height="22" border="0" align="absbottom" />Home</a></li>

When i run it in the browser, the word "Home" changes color and that's working great; however, I also want the image to change out.

Is this possible? I tried adding this line into the SpryVerticalMenuBar.css:

ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #C6AB76;
color: #FFFFFF;
background-image: url(images/smallpaw_over.gif);

Thanks for your help.

07-23-2010, 01:13 AM
if you want the image also to change colour on hover. then i suggest a new css rule e.g ul li a:hover. have another small paw image ready in the colour you want it to change to. then in ul li a:hover property box category: Background input the new smallpaw image. return to the browser, the image should change colour.

Don't know if i made sense but if you get confused i'll try n make it simple step by step.

07-23-2010, 03:13 PM
MagicPower: Thanks for your reply. I created two images...one is of a small dog paw(smallpaw.jpg) and the other is a transparent gif that is the same size as the small dog paw (smallpaw_over.gif).

Initially, when the page loads, I want the transparent paw to display...then, after the user hovers over it, i want the paw to display.

I tried adding this code to the sprymenubarvertical.css, but it doesn't work:(smallpaw_over.gif).

I tried adding this code to the sprymenubarvertical.css:

ul.MenuBarVertical li a:hover
background-image: url(images/smallpaw.gif);

Does this look right to you?

Thanks again for your help,