2

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.

Improve this question
5
  • 2
    Probably better asked on StackOverflow, which deals more with implementation than this site.
    – Rahul
    Sep 17, 2010 at 18:28
  • @Rahul - Definitely should go there - this is 100% an implementation question.
    – Charles Boyung
    Sep 17, 2010 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, 2010 at 19:47
  • 1
    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, 2010 at 19:58
  • 1
    Moved and added link back to this thread. This is the link on StackOverflow. stackoverflow.com/questions/3738660/…
    – milesmeow
    Sep 17, 2010 at 20:10

2 Answers 2

Reset to default
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.

Improve this answer
1
0

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

http://www.alistapart.com/articles/sprites

Improve this answer
3
  • Sprites really have nothing to do with having irregular shaped links.
    – Charles Boyung
    Sep 17, 2010 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, 2010 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, 2010 at 19:54

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