Javascript 在一个图像上定义多个单击区域

我正试图找出最好的方法来做这件事

基本上我有一张美国地图，我想为每个州定义一个点击区域。（因此它们必须是奇形的）

我做了一些关于在html5画布和javascript中定义命中区域的研究。虽然我在创建奇形怪状区域方面没有发现太多的东西

这是最好的方法吗？你们还有其他建议吗

我还希望能够突出显示单独的区域，一旦鼠标在它上面，并让它改变颜色的基础上点击顺序，使区域定义必须相当准确

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

您可以使用如下

：

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

//usemap属性必须与地图的name属性匹配。
//坐标是矩形左上角和右下角的x，y
//坐标是圆心的x，y和圆直径一半的长度
//坐标是为五角形（5个角）绘制的形状中每个点的x，y
//coords属性可以如下所示：coords=“0,0,10,10,5,10,10,5,12,13”
//我知道这不是一个五边形，但它确实说明了你需要5双
//如果你需要更多，你可以根据需要添加。

---

然后，在area标签的href属性中，您可以将自己的路径放在用户单击该区域时所处的位置。

创建图像的可选择部分并精确捕捉到地图并不容易，因此，让我们使用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的优势在于可以使用CSS3转换为SVG元素设置动画，也可以使用javascript对其进行操作。

---

我在我的网站上主持了一个这样的例子。打开控制台并开始单击状态。

相当多的javascript画布库可以帮助您解决这类问题，例如Raphael（）或KineticJS（）

尝试查看d3和geojson绘图。您可以为d3生成的每个svg对象分配单击侦听器。这是专门针对美国地图的，还是您希望使用其他图像来执行此操作？我很确定有一个jQuery地图插件可以做到这一点。\n是的，在这里：@caffinatedmonkey我会研究一下，谢谢@是的，这只是一张美国地图。但是，我想，如果我学会了如何手动执行此操作，我将获得以后在其他场景中执行此操作的知识。谢谢真不敢相信我没有偶然发现。。我的护目镜今天一定要掉了。好家伙！这看起来是一个完美的解决方案。谢谢这太棒了！我不知道你可以像那样使用svg和geojson。（显示还有多少东西要学）哈哈，谢谢你，伙计！