How can I overlay multiple PNGs and have each of them clickable in their visible area?

Question

I need to set up a clickable image system for dynamically created content. The image consists of a background image, and several grey-scale mask images.

Background Image:
_{(source: goehler.dk)}

Masks:
_{(source: goehler.dk)}
,
_{(source: goehler.dk)}
,
_{(source: goehler.dk)}
,
_{(source: goehler.dk)}
,
_{(source: goehler.dk)}

Each area, defined by a mask, should be highlighted on mouse over, clickable on the image, and open a certain link.

How do I do this the smartest way? I need this to be responsive, and work with a couple of hundred masks.

I haven't tried anything yet, but I've done some research, which have resulted in two possible solutions:

A. Trace the masks, and create imagemap coordinates for each, which can be overlayed the original image. (seems difficult, especially with masks that have holes).

B. Layer all masks on top, and shuffle through them and search for white pixels. (seems processor intensive, shuffling though hundres of images).

I hope however, that there is a third, simpler, more optimized and more elegant solution?

Any advice?

I'd love to hear from anyone who have any experience with something similar.

Answer 1

You should try to precompute as much of this as possible, especially because it's probably not feasible to download hundreds of these mask images in the user's browser.

Your solution A seems like a good way to go, provided it's possible to compute coordinates from the pixel shapes.

Another idea could be combining the mask images in a single image by color-coding the mask shapes (filling each shape with a different color). Colors can be assigned randomly as long as they are used only once. Along with that, provide a simple lookup table for the color-to-shape mapping (e.g. #f00 => cube, #0f0 => donut, ...). Now, when the original image is clicked:

1. Find the pixel coordinate of the click
2. Lookup the color in the mask image at the same coordinate
3. Lookup the shape for the color in the lookup table

Answer 2

First of all, even with 100s of masks, this should not be slow, because the required algorithm has a complexity of O(n) and that is not slow.

The only bottleneck you will have is the pixel lookup, which is an expensive operation (unless you do certain modifications).

I would go with B.

Lets say your mouse coordinates are x:400, y:300, relative to your background image which has the dimensions 800x600.
You would iterate over all masks, and check:
mask.getPixel(400, 300) == white?
If so, use that mask, blend it over the original image with a specific alpha factor so the background get grayed out.

The bottleneck is: mask.getPixel() You would have to do that n times if you have n masks and its the last one. As I stated, its an expensive lookup; so can you optimise it?
Yes, cut out unnecessary look-ups by using: bounding boxes.
But to use bounding boxes, you must first create the bounding box data for each mask, which you could do once when you load (no problem).
The bounding box defines the upper left and bottom right corner that "bounds" the white area snugly. In other words, you must determine min and max X & Y coordinate where the pixel is white.
If the mouse coordinates are outside of this box, do not bother making a lookup, as it will certainly not be in the white area.

Edit: Since I was bored, I went ahead and implemented it...
Check it out.

//preProcessMasks() & trackMouse() is where everything happens

Gotto have the background image "img.jpg" and the masks "1.jpg" .. "5.jpg" in the same folder!
Works with firefox, chrome says "The canvas has been tainted by cross-origin data"... its a quick n dirty hack, do whatever you want with it, if its of any use to you!