Are there other options of enabling an irregular shaped clickable area on a web page other than image maps?

Question

(This is a post that I'm moving from ui stackexchange.)

We have some irregular shaped areas...imagine a map of the states of the US. Imagine also that inside each state there is a rectangular region that contains graphics and text. We want to make each of the states react to mouseover/mouseout/click.

If it is a straight up HTML/Javascript page (no Flash), are there other ways to implement this than image maps?

If this is not possible, I would also consider just having the rectangular region within each state react to mouse events.

Answer 1

how about coordinates? grab your map of the us, figure out the polygons that contain a state, and every time the user clicks somewhere, get the position of the click and figure out what polygon that position is in.

the only tricky part is doing the translation from logical to physical. i.e. when you get the location of a click it'll probably give you the location in global browser positioning, and you'll need to figure out where your image is using jquery's .position().

Answer 2

Does "straight up HTML" mean you can use Javascript? If so, consider the Raphael javascript library, which wraps SVG. Check out their homepage for a great overview of what you can do, including this example of counties (?) of Australia: http://raphaeljs.com/australia.html

You could also consider processing.js, which is a similar visualisation library but wraps canvas as opposed to SVG.