[thelist] Tip: Image Map Rollovers with CSS

HUTTON III, WILLIAM J. WJHUTTONIII at energy-northwest.com
Thu Nov 6 15:39:39 CST 2003


A coworker asked me if it was possible to add some sort of visual effect to a single graphic image map.

The underlying image may change often, and he didn't want to spend a lot of time editing the image map, other than readjusting the coordinates, when necessary.

I found a CSS tutorial that got me started, then modified their code to suit our needs.

Wasn't it Picasso that said, "good artists copy, great artists steal."  ;)

Hope that the tip/link help others, and maybe gets you excited about the power of CSS if you're a late convert.

Cheers,
Will

<tip type=3D"image map rollovers" author=3D"Will Hutton">
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.
</tip>



**************************************************************************************************
This e-mail message and all attachments transmitted with it are for the sole use of the 
intended recipient(s) and may contain confidential and/or legally privileged information. 
Please DO NOT forward this e-mail outside of the recipient's company unless 
expressly authorized to do so herein.  Any unauthorized review; use, disclosure or 
distribution is prohibited. If you are not the intended recipient, please contact the 
sender by reply e-mail and destroy all copies of the original message. Warning: 
Although Energy Northwest has taken reasonable precautions to ensure no viruses 
are present in this e-mail, the agency cannot accept responsibility for any loss or 
damage arising from the use of this e-mail or its attachments.
**************************************************************************************************



More information about the thelist mailing list