[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