CODEWITHSUNDEEP
browser
milesmeow
milesmeow

Reputation: 3767

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

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

Upvotes: 5

Views: 1327

Answers (2)

Rahul
Rahul

Reputation: 12231

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.

Upvotes: 4

Oren Mazor
Oren Mazor

Reputation: 4477

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

Upvotes: 0

Related Questions