Risk-like (area-based) maps and HTMLJavaScript - Stack Overflow

admin管理员组

文章数量:1430539

Let's say we have a Risk-like world map which is divided into regions of custom shape.

How does one enable the user to select an individual region using HTML5/JavaScript? I assume Canvas2D is the first step, but then what?

Let's say we have a Risk-like world map which is divided into regions of custom shape.

How does one enable the user to select an individual region using HTML5/JavaScript? I assume Canvas2D is the first step, but then what?

• javascript

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Jun 27, 2013 at 15:06 HowieHowie 2,77866 gold badges3535 silver badges6161 bronze badges 1

• 2 raphaeljs has a demo that uses a svg to make a clickable map raphaeljs./australia.html – user18428 Commented Jun 27, 2013 at 15:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

There are gazillions of great libraries. To name a few:

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

Specific examples:

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

You can create a map tag that you then add to your img tag. In your map tag, you define different areas where the user can click. Then, you can define javascript functions to be call on the mousedown event of each area.

I don't like explanation, I prefer examples! So here a link I just found that describe this technique better :

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

And by the way, you don't need to manually create the areas. There are a tons of WYSIWYG tools out there that will create it for you!

本文标签： Risklike (areabased) maps and HTMLJavaScriptStack Overflow