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

Question

我正试图找出实现这个目标的最佳方法.

基本上我有一个图像是美国的地图,我希望能够为每个州定义一个点击区域.(所以他们必须是奇怪的形状)

我已经做了一些关于在html5 canvas和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属性中,您可以将自己的路径放到用户单击该区域时所到达的位置.