For anyone out there using HTML Image Maps who wish to have areas of the map light up, hilight, or a few other effects, I highly recommend checking out the Map Hilight plugin for JQuery. What the plugin does is apply an effect to every area in the image map, so when that area is clicked, hovered over, etc.. the area will become "hi-lighted." MapHilight is really easy to setup, once you have an image map created, you simply apply the effects using the following call:
$("#ImageID").maphilight();
and that's it! There are quite a few effects that you can customize. There are multiple ways to change the defaults, but the easiest is to include this snippet in your JS code and change the values as needed:
$.fn.maphilight.defaults = {
fill: true,
fillColor: '000000',
fillOpacity: 0.2,
stroke: true,
strokeColor: 'ff0000',
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false
}
There is much more you can do with this plugin, but this is an easy way to apply basic effects to any image map. This library becomes even more powerful / easy to use if you combine it with the JQuery Metadata plugin. Both plugins can be found here:
http://plugins.jquery.com/project/maphilight
http://plugins.jquery.com/project/metadata
Documentation for Map Hilight can also be found here:
http://davidlynch.org/js/maphilight/docs/
