how to make javascript ignore transparent image areas during hover and click

Question

i have located a number of posts on this topic, but none of them seem to address my specific need. my ultimate goal is to reproduce Nike ID Flash-based customization using html5,css3, and javascript.

my immediate knee-jerk reaction was to slice up an image into a number of irregularly-shaped image slices. then use some image editing software (photoshop, etc) to create additional copies of each image slice, each bearing a different color profile. finally, i would position all images slices in such a way where they would recompose the original image, sort of like a jigsaw puzzle.

and that is where i hit a wall. the very nature of each such image slice's irregular shape would result in some of its area(s) to be transparent. what makes it more complicated is the fact that some of those transparent areas are bound to reside above the active slice areas of the underlying image slices, thereby preventing the latter from registering the hover and click mouse actions. granted there are a lot of posts out there on how to make javascript ignore the transparent areas. however, i have yet to come across a solution where a transparent area would truly behave transparent, thereby allowing for the underlying image to register mouse interactions.

so the question is if there is a way to make transparent areas truly transparent? or am i going all wrong about is?

any suggestions would be greatly appreciated! thank you.

Answer 1

This can be achieved with <map> and <area> tags.

http://www.image-maps.com/ allows you to upload an image and generate the HTML code for you. All you need to do is to drag the certain areas.