javascript - 单击填充图像映射并设置变量

Question

我有一张人体图像 map ，我将其分为 3 个区域(为简单起见): body 、右腿和左腿。

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

需要设置的变量有

• {隐藏:躯干}
• {隐藏: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>

我已经做到了这一点，并在图像上选择了一个热点，即在 body 的一部分而不是整个肢体上的圆圈。我很难过。

Answer 1

可能最快/最简单的方法是使用 ImageMapster jQuery plugin .

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

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

这些演示表明它会完全按照您的要求进行:

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

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

这是一个基本示例的代码:

http://jsfiddle.net/nYkAG/