asked on

HTML / CSS hover over image

Hi,

I'm trying to create a hover over image effect using CSS / HTML and when an item is selected it is highlighted with another background image.

I've had a go using HTML / CSS but don't seem to be getting too far... can any one help?

This is what my HTML looks like:

tr>
<td >
<a class="menu" href="Default.aspx" >Home</a>
</td>

<td >
<a class="menu" href="aboutus.aspx" >About Us</a></td>
<td >
<a class="menu" href="products.aspx" >Products</a>
</td>
<td >
<a class="menu" href="services.aspx" >Services</a>
</td>
<td >
<a class="menu" href="customers.aspx">Customers</a>
</td>
<td >
<a class="menu" href="contact.aspx">Contact Us</a>
</td>
</tr>

This is what my css looks like:
a.menu {
color: white;
font-family: Tahoma;
font-size: 8pt;
font-weight: bold;
border-right: 1px solid white;
text-decoration: none;
background-color: #fff;

background-image:url(Images/menu-off.jpg);
      width:130px;
      height:26px;
      background-repeat:no-repeat;
}

.menu:hover {
background-image:url(Images/menu-off.jpg);
      width:130px;
      height:26px;
}

Many thanks,

Nerdwood

Hi

Is your image URL in the :hover not meant to be "menu-off.jpg"? Perhaps it's meant to be "menu-on.jpg"?

Michael

Nerdwood

You may want to specify "a.menu:hover" instead of ".menu:hover"...

Peter Hart

here's one to see how it works.......

/*start definition */
#menu1 { width: 200px; }

#menu1 ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#menu1 a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#menu1 a:link, #menulist a:visited
{
color: #EEE;
text-decoration: none;
}

#menu1 a:hover
{
background-color: #369;
color: #fff;
}

/* END definitions */

/*page with menu below */

<div id="menu1">
<ul id="menulist">
<li><a href="home.htm" title="home">home</a></li>
<li><a href="test.htm" title="test">test</a></li>
<li><a href="contact.htm" title="contact">contact</a></li>
</ul>
</div>

paulCardiff

ASKER

Hi

Thanks for your help.

Would this also work for a background image? As the menu background has a gradient and curved edges.

Many thanks,

Nerdwood

You wouldn't want to be changing the menu background image on a mouseover, would you?

Are you just trying to change the background image for the link or for the whole menu?

Peter Hart

yes will work with changin thebackground (Nerdwood - its not a problem that's how menu grahpics work!!)
add...to the menu
background-image:url(Images/menu-off.jpg);
but I suspect the hover should be:
background-image:url(Images/menu-over.jpg);

Nerdwood

I was working on the assumption that there is a background image for the menu as a whole (that has a "gradient and curved edges"), and that it's just the background images for the links themselves that would be changing... but we'd just have to see how the menu was being implemented.

ASKER CERTIFIED SOLUTION

rajanibajpai

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

rajanibajpai

One more thing; if u want background to be displayed only for hover then also remove background image property from a.menu {

Nerdwood

What line are you suggesting gets removed? And why?