[thelist] Tip: Image Map Rollovers with CSS

Kristof Neirynck k.neirynck at belgacom.net
Fri Nov 7 16:25:12 CST 2003


HUTTON III, WILLIAM J. wrote:
> If you would like to add rollover image effects to an image map, but the graphic you use for your image map changes often, and you don't want to slice the image, and spend hours editing images in Photoshop, try this:
> 
> You can use just one image as a base image for your image map, then using CSS, you can place a second image, perhaps with the color desaturated, on top of the first, then dynamically clip the second image for a nice effect.
> 
> I got started with help at this website;
> 
> 	http://www.webreference.com/dhtml/column2/
> 
> but modified the code to include clipping values for top and bottom coordinates as well.
> 
> Hopefully I can dynamically access the coordinates in the <area> tag to make the code even more reusable.

That can be done easier.
Set the base image as th source of your image.
Dynamically set the image as its own background.
Change its source onmouseover to a partially transparent gif or png.
Even dummies will be able to update it if you make sure the filename of 
your image can be derived from the href of the area.

I created such a script once, it's not rocket science, but it should 
save you some time when you create your own.
Works in msie6+, moz1+ and op7+.
Other recent browsers should have no problem with it.
<http://kristof.f2o.org/test/mouseoverMap/>


Kristof



More information about the thelist mailing list