Hey all!

 

I'm trying to figure out how to create a css based rollover for a link, using images.

 

I going to have six images placed horizonatlly inside a div and on rollover, I just want the colours to reverse out from themselves. I haven't started yet but, I'm thinking, would my html/css look something like this for the link?:

 

<a href="http://www.webdesignforum.co.uk"> <img src= "gifs/myimg.gif"></a>

 

# mynavbar:hover {

background-image: url(gifs/myimg.gif);

}

 

An example of what I'm trying to acheive is shown on this site (4 images at the bottom of the page)

http://www.bbc.co.uk/radio1/hiphoprnb/

 

Thanks all - I appreciate you'll taking the time to have a look and help me out!!

 

Riggers...

You can use a "sprite" which is a combined image, one for normal and one for hover (and another for visited if you want) either one on top of the other or side by side and then code them for the "a" tag and the "a:hover" styles so that the normal link state only shows the height of the normal part of the combined image and the hover style is offset by a certain size so that only the hover part of the image shows. See

 

http://css-tricks.com/css-sprites/

You can use a "sprite" which is a combined image, one for normal and one for hover (and another for visited if you want) either one on top of the other or side by side and then code them for the "a" tag and the "a:hover" styles so that the normal link state only shows the height of the normal part of the combined image and the hover style is offset by a certain size so that only the hover part of the image shows. See

 

http://css-tricks.com/css-sprites/

cheers dude - i'll give that a bash!