Image change on rollover

[Ingenious]

Would it be easy make the main logo image on my site (which is a .png) change when someone hovers their mouse pointer over it? If so how do I do this please? With CSS or Java and how?

 

[Paul B]

First hit on Google.

http://www.spiceupyourblog.com/2009/10/how-to-make-rollover-mouse-over-image.html

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>

You will need to adapt that to fit the existing HTML and CSS.

Another link: http://stackoverflow.com/questions/4717117/css-image-link-change-on-hover

 

[Hoffi]

is possible with css or JavaScript.

CSS:
This in extra.css should work. (untestet)

div#logo: hover img {
visibility: hidden;
background-image: url(path/to/image);
}

It could be neccesary to include width and height.

 

[Hoffi]

Brogan... that way is very old. Image Change works easy without JS.

 

[Paul B]

That's why I included the second link using CSS.

 

[Ingenious]

Thanks guys. The CSS version (from Brogan's post, adding a class to the logo image and then defining a hover CSS value for it in extra.css) works in the sense the other image appears on hover over. BUT, it seems to be UNDER the logo. So I can only see changes in the image through the transparent parts of the original logo when I hover over. I want the image to be completely replaced on hover over, or to appear over the original logo, otherwise this doesn't work. So still a bit stumped.

I'm only trying to make an Easter Bunny "wink" on hover over, so this is not mission critical.

 

[Paul B]

You may need to change how the original logo is displayed and set that as background image too.