Image map image replacement onMouseOver

Question

I'm looking to have a full page image with a section of the image that, when hovered over, changes the image to a colored version of the original black & white image. I tried doing this with image maps & onMouseOver, but didn't have any success. There are only two images being used, a color and a black and white one.

I just want to have it so that when you hover over a section of the black and white image, the whole thing turns to the color version, and onMouseOut reverts back to the black and white. I'm using this as a splash screen for a blog and the hovered section will serve as a link into the site.

Thanks for the help

Answer 1

If you don't mind your hover area being "square" then using pure css this should work (note, replace the background colors with your appropriate image and the border on the a is just for illustration). Tested in Firefox, IE7, IE8:

HTML:

<a href="#"><span class="img"></span></a>

CSS (EDITED FOR IE7-8 BUGS):

body {
 margin: 300px 218px 178px 400px; /*see explanation below css*/
 width: 22px; /*total width of a tag including padding and borders*/
 height: 22px; /*total height of a tag including padding and borders*/
}

a { /*warning, do not give this position: use margin to position it*/
 width: 20px; 
 height: 20px; 
 display: block; 
 border: 1px solid red; 
 overflow: visible; 
 /*deleted margin from this: moved to body*/
}
a span.img {
 position: absolute; /*this gives it block display by default*/
 top: 0; 
 left: 0; 
 z-index: -1; 
 background-color: yellow; /*bw image here*/
 width: 640px; /*image width*/
 height: 500px; /*image height*/
}
a:hover span.img {
 background-color: blue; /*color image here*/
}
/*deleted  the a:hover span.img:hover as it was not needed after all*/

Of course if IE6 is a concern, then you need to do something with javascript for it to recognize the span:hover.

ADDED ON EDIT: I discovered that the a tag would hover sometimes outside of the defined area for the IE browsers. To avoid that, the body must have margins placed on such that the left and top position the a tag, and the right and bottom must make up the difference in the image size minus the total width of the a tag.