change the image when I hover on a menu item using only css

[therese]

On this practice page: http://www.corumwebdesigns.com/practice/index.html

I want to change the image when I hover on a menu item using only css.

Does anyone have an idea how to do this?

Thanks!

[gil davis]

Make the image the background of a link and change the url on hover.

[F84]

yeh all you do is make the background one image in css and then when the mouse hovers it you have a rollover in place.........

example

-------------------------------------------------------------------------

#menu #contact
{
width: 88px;
left: 0px;
top:0;
background: url(images/contact.jpg) no-repeat;
}


#menu #contact a:hover
{
background: url(images/contact_over.jpg) no-repeat;
}

-------------------------------------------------------------------------

something like that....

[ray326]

I think that first selector should be

#menu #contact a:link

and you might want to add a display:block to it.

[therese]

I think I am almost there, check again at http://www.corumwebdesigns.com/practice/index.html
But the images that pop up when a link is hovered on push the rest of the page down.

[ray326]

I *think* for the effect you want this will get you closer but you'll need to adjust the top/left positioning.

#nav a:hover img {
display:block;
position:absolute;
height:112px;
width:150px;
margin-left:4px;
margin-top:14px;
}

[therese]

Ray, thanks! That works great in Firefox. IE7 is a different story. I'll look at it tomorrow, time for bed...