1

I am looking to build a web app that will have an interface based on interactive images. Each image will have anywhere from 10-200 clickable/touchable/highlightable regions with irregular shapes (think map-like).

I can see several ways of doing this, like svg images, imagemaps, the <canvas> element, or javascript libraries like paper.js or raphael. My question, though, is what way would be the most responsive? And I'm excluding Flash completely.

By responsive, I mean:

  • Quick to load, to be ready to be touched/clicked
  • Instant reaction time to being clicked (I imagine some libraries may take some processing time to figure out if a click was in a specific region, when there are many regions)
  • Each region can be quickly highlighted and un-highlighted
Indigenuity
  • 9,332
  • 6
  • 39
  • 68

1 Answers1

2

I had the same problem and we opted for svg + Raphael.js

I'm highlighting map sections based on either the mouse hovering on the map or hovering over an HTML element that triggers DOM-related events, one of which calls the Raphael.js script to highlight the same sections.

Very responsive. the code is not available for sharing at the moment, but yes, it does work really well, so I suppose it would be as reactive with touch/click events

Stephane Deschamps
  • 21
  • 3