Region Specific Image Rollover

JavaScript
1

For the first time in a long time, I’ve encountered a project with a single image that has many regions. Each region is a polygon, and will bind to a unique rollover event. That rollover event will pull back data for each region. For the past few days, I’ve been brainstorming ways to pull this off.

I’ve thought of using a hidden image in a canvas with a black background, and a different color foreground for each region. Then, mapping the color the proper region data on the backend.

I’ve thought of passing a huge Javascript object with keys that relate to a position in the image, and values that define the region data.

Initially, I dismissed the idea of a good, old-fashioned image map, in an attempt to find something sleeker and sexier. But perhaps this is the best solution?

Would love to hear your thoughts on this…

Thanks,
e39m5

2

This is a total cheat, and probably not feasible with the image size, but one technique would be to set up the image map, and then use JavaScript to swap out the src of the <img>. You’d have to store each rollover state as its own image, though… In retrospect, not such a good idea.

I’m just not a fan of recreating browser features. You’re trying to build an image map, so why not just build an image map? Stupid rollovers.