Risky (area-based) maps and HTML / JavaScript

Question

Let's say we have a risk map, similar to a ritual, which is divided into areas of the user form.

How to allow user to select a specific region using HTML5 / JavaScript? I guess Canvas2D is the first step, but what then?

Answer 1

There are huge libraries. To name a few:

• http://d3js.org/
• http://raphaeljs.com/
• http://paperjs.org/
• http://box2d-js.sourceforge.net/
• http://threejs.org/

Specific examples:

• http://bl.ocks.org/mbostock/2206590
• http://raphaeljs.com/world/
• http://raphaeljs.com/australia.html

Answer 2

You can create a map tag, which you then add to your img tag. In your map tag, you define different areas that the user can click into. You can then define javascript functions to call the mousedown event of each scope.

I do not like the explanation, I prefer examples! So, here is the link I just found that better describes this technique:

http://www.tutorialspoint.com/javascript/javascript_image_map.htm

And by the way, you do not need to manually create areas. There are many WYSIWYG tools out there that will create it for you!