How can you Image rollover using CSS

CSS Image rollover

[cdgeorge]

Is there a simple way to image rollover using CSS rather than using javascript? For example, I would like to start with a black and white image on the website, then when the mouse hovers over the image it rolls over to a color image (which is simply the replacement image).

[DrDoc]

Welcome to WebmasterWorld!

It is possible to change the background image of an element. So, this would require the initial image (B&W) to be set as a background image of a div, for example. Then you can simply change the background image on hover.

[cdgeorge]

Thanks for your advice - sounds really easy. Sorry, I am a newbie at CSS but realise its strengths. I will try this out and get back to this thread with the results.

[BlobFisk]

Welcome to WebmasterWorld, cdgeorge!

I recently implemented something like this. I asked a quesiton or two about it here: [webmasterworld.com...]

HTH

[cdgeorge]

I am keen to know how Dr Doc managed to get this process working by just using DIV elements to play with using CSS. I am trying and failing. I need to substantiate things by using links etc. Can anyone show the coding in its most simplest form by using DIVs?

[cdgeorge]

I've sussed it - in its absolute simplest form - it's just a matter of coding div and div:hover. How well supported is div:hover using older browsers?

[cdgeorge]

Sorry everyone - in my haste I found that Firefox worked (because I previewed it after programming using the free NVU tool) - but browsing using the very latest IE6 does not work. Shame, it would have been all so easy.

[isitreal]

the div:hover pseudo class can only be expected to work on non IE browsers, modern ones. You need to use a:hover to get that functionality on IE, which isn't a big deal.

Or just use javascript.

[createErrorMsg]

But you can't put a div inside an <a> tag, can you?

[Wertigon]

Nope, but you can make a elements into block elements by using the

display : block;

rule.

[cdgeorge]

I am trying to use the <a> tag to best effect, and it works, but not as smoothly as the <div> (which isn't supported using IE so no good anyway). I find that I have to use the <a> tag in this context:
<a href="#"><span>Text</span></a>
I find that I am having to wrap some 'text' up in this example and the 'text' is visible in the image which is not the desired effect. How would you use the a: and a:hover tag successfully overall? Forgive me for not using javascript - it just bugs me for now trying to sort it in CSS to see if it is possible to show one image, then hover over that image which then gives the effect of replacing that image (hence the black and white, color effect).

[cdgeorge]

Again an ooops, I was able to wrap the <span></span> without text successfully - so it's all OK now. I just have the flicker to contend with - almost there! I appreciate your help - to reiterate, I am just beginning html and css so make many simple mistakes.

[ktwilight]

i've actually use this method on my website, even asked for help here... ;) ya could have searched...

<a href><span></span></a> works well, but it won't work in IE browsers. ;) even when i've put span { display: block } or span { display: inline } it still didn't work out for IE.

i am not sure why though, the current default i have for it is { display: block } it displays perfect in all browsers except IE. IE just distorts the entire table around it.

so far, there isn't a hack for it afaik. if you can find a solution to it, please let me know, thanks. ;)

<edit>
i went to crack it, found out that my page didn't display properly at all. found a fix though ;)

for your span tag

span { display: block; overflow: hidden; }

should work perfectly... ;)

i threw in

a { border: none; }

just to be safe, am not sure if it helps though...

HTH :D
</edit>