我正在尝试找出执行此操作的最佳方法。
基本上我有一张美国 map 图像,我希望能够为每个州定义一个点击区域。 (所以它们必须是奇形怪状的)
我做了一些关于在 html5 canvas 和 javascript 中定义命中区域的研究。虽然我还没有发现很多关于创建奇形区域的信息..
这是解决问题的最佳方法吗?你们还有其他建议吗?
我还希望能够在鼠标悬停在某个区域上时突出显示它,并让它根据点击顺序更改颜色,以便定义的区域必须相当准确。
最好将每个状态拆分成不同的图像,然后在主容器内使用绝对定位吗?
最佳答案
你可以使用 <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>
然后在 area 标签的 href 属性中,您可以将自己的路径放在用户单击该区域时的去向。
关于javascript - 在一个图像上定义多个点击区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19139477/