定义一个图像上的多个点击区域

Question

我正试图弄清楚这样做的最佳方式。

基本上我有一个图像是美国的地图，我希望能够为每个州定义点击区域。 （所以他们必须是奇形）

我已经做了一些关于在html5画布和JavaScript中定义命中区域的研究。虽然我还没有找到太多的创建奇怪的形状区域..

这是最好的方式去呢？你们是否有其他建议？

我也希望能够突出显示个别区域，一旦鼠标在它上面，并根据点击次序改变颜色，所以定义的区域必须相当准确。

最好是将每个状态分成不同的图像，然后在主容器中使用绝对定位？

Answer 1

你可以使用一个<map>这样的：

<img src="yourImage.gif" width="99" height="99" alt="YourImage" usemap="#YourMap"> 
//The usemap attribute must match the name attribute of your map. 
<map name="YourMap"> 
    <area shape="rect" coords="0,0,82,126" href="path1.htm" alt="Path1"> 
    //Coords are x, y of the top left corner and the bottom right corner of the rectangle 
    <area shape="circle" coords="90,58,3" href="path2.htm" alt="Path2"> 
    //Coords are the x, y of the center of the circle and the lenght of half the diameter of the circle 
    <area shape="poly" coords="124,58,8, 1" href="path3.htm" alt="Path3"> 
    //Coords are the x, y of each points in the shape drew for an pentagone (5 corners) 
    //The coords attribute could look like this coords="0, 0, 10, 10, 5, 10, 10, 5, 12, 13" 
    //I know this dont make a pentagone but it does ilustrate that you need 5 pairs of  
    //numbre in the coords and that if you need more of them you can add however you need . 
</map> 

然后在区域标签的href属性，你可以把自己的路径在用户进入时，他点击的区域。

Answer 2

创建图像的可选部分并非易事，这些部分完全对准地图，因此我们可以使用d3，SVG和geojson将美国绘制为svg。

var width = 1000, // create constants for svg width and height 
    height = 500, 
    projection = d3.geo.albersUsa(); //get projection 
// albersusa is a special projection for the united states 
var svg = d3.select("body") //select the body and create the svg with the width and height constants. 
    .append("svg") 
    .attr({ 
    width:width, 
    height:height 
    }); 

var g = svg.append("g"); // append a svg group for the map 

d3.json("geo.json", function(data){ //fetch the json data 
    console.log(data.features); 
    g.selectAll("path") //draw the map 
    .data(data.features) 
    .enter() 
     .append("path") 
     .attr("d", d3.geo.path().projection(projection)) 
     .on("click", function(d){ // add onclick listener that logs the state clicked on. 
     console.log("You clicked on " + d.properties.NAME, d); 
     }); 
});  

在图像上使用SVG的优点是，svg元素可以使用CSS3转换动画，也可以使用JavaScript进行操作。 我在我的google drive上托管了一个这样的例子。打开控制台并开始点击状态。

Answer 3

不少的JavaScript库的画布可以帮你出这样的事情，比如拉斐尔（http://raphaeljs.com/world/）或KineticJS（http://www.html5canvastutorials.com/labs/html5-canvas-world-map-svg-path-with-kineticjs/）