User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question

closed as off topic by Rahul, ChrisF, Patrick McElhaney Sep 17 '10 at 20:01

Questions on User Experience Stack Exchange are expected to relate to user experience within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

Probably better asked on StackOverflow, which deals more with implementation than this site. – Rahul Sep 17 '10 at 18:28
@Rahul - Definitely should go there - this is 100% an implementation question. – Charles Boyung Sep 17 '10 at 19:09
Is there a special way to move it or do I just copy and paste? I want to retain the comments and answers. – milesmeow Sep 17 '10 at 19:47
There's no migration path at the moment - just copy and paste. Should the site make it out of beta then a migration path may well be set up. – ChrisF Sep 17 '10 at 19:58
Moved and added link back to this thread. This is the link on StackOverflow.… – milesmeow Sep 17 '10 at 20:10
up vote 2 down vote accepted

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:

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

share|improve this answer This is what I'm looking for. Now I have to consider their list of supported browsers. :) – milesmeow Sep 17 '10 at 20:07

With modern browsers you can use CSS sprites and very clean markup to do the same thing. Here is a great tutorial on using them at A List Apart. Read the whole article, but see the section on "Irregular Shapes."

share|improve this answer
Sprites really have nothing to do with having irregular shaped links. – Charles Boyung Sep 17 '10 at 19:08
Did you read the article? It covers this exact issue directly. It uses CSS to define the hover behaviors and <li> markup tags to define the click actions. – Jim Jarrett Sep 17 '10 at 19:27
I Jim. It's a good link but the technique won't really solve my ideal situation. In my situation the shapes are touching each other. In the article, they have enough space between them where rectangular regions can still be used. I guess I can break down my irregular shape into an approximation based on many rectangles...seems tricky, but you got me thinking. – milesmeow Sep 17 '10 at 19:54

Not the answer you're looking for? Browse other questions tagged or ask your own question.