PDA

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


proctor
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.
Proctor

MagicPower
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.

proctor
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,
Proctor