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...