Question

我有一个人体的图像地图，我将其划分为3个区域（为简单起见）：身体，右腿和左腿。

我希望能够单击正文的部分，并让该部分更改颜色（例如填充灰色）并将该部分的变量值设置为true（1）。默认情况下，所有正文部分的值均为0。

需要设置的变量是

{隐藏：TORSO}
{隐藏：RLEG}
{隐藏：LLEG}

这是我的图片地图：

<img src="http://imgur.com/wzHgrvS.jpg" usemap="#Map" border="0" />

<map name="Map"map id="bodyMap" name="myMap" >
<area shape="poly" alt="" title="Torso" href="#" id="TORSO" coords="94,84,95,134,107,177,104,189,102,200,103,209,102,221,188,220,184,197,182,183,183,168,187,153,191,142,192,129,188,89,155,90,130,90,114,89" />
<area shape="poly" alt="" title="Right Leg" href="#"id="RLEG" coords="99,221,97,242,94,259,90,270,90,291,91,315,94,333,96,343,95,347,94,358,93,366,93,372,89,387,89,405,93,421,96,439,99,456,100,470,100,477,116,477,113,462,116,441,119,423,122,408,119,392,117,376,122,363,126,337,133,314,139,289,140,273,133,265,130,252,122,240,114,231" />
<area shape="poly" alt="" title="Left Leg" href="#" id="LLEG" coords="147,269,153,303,158,319,162,338,164,348,164,357,166,365,170,373,170,380,168,391,166,403,166,414,168,427,172,443,174,460,175,469,174,474,190,473,187,453,192,437,194,423,199,399,197,381,195,349,191,335,196,315,196,289,196,265,191,242,189,222,187,218,176,230,167,239,160,249,155,262,154,266,148,270" />
</map>

我已经完成了这个并且在图像上选择了一个热点，即在身体的一部分上的圆圈，但从不是整个肢体。我很难过。

Answer 1

执行此操作的最快/最简单的方法可能是使用ImageMapster jQuery plugin。

James Treworgy的ImageMapster（GitHub：jamietre / ImageMapster，License：MIT）使得操作HTML图像映射变得更加容易。可以使用图像映射和更现代的HTML / CSS / JavaScript技术创建有趣的效果，同时仍然可以使用旧版浏览器中的基本功能。

http://www.outsharked.com/imagemapster/

这些演示表明它将完全符合您的要求：

http://www.outsharked.com/imagemapster/default.aspx?demos.html

通过调用$('img').mapster(options)，ImageMapster将尝试绑定到具有关联映射的每个图像。可以使用$('area').mapster('select')选择图像映射中的区域。该项目有很多选项和功能。

以下是一个基本示例的代码：

http://jsfiddle.net/nYkAG/

Answer 2

您需要做的是使用为您想要点击并发生某些事情的区域创建图像映射。如果您没有Photoshop或Firework并且正在寻找免费服务，请尝试Image-Maps.com。

在点击和设置变量上填充图像映射

2 个答案: