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

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

我希望能够单击主体的部分，并使该部分更改颜色（例如填充灰色），并将该部分的变量值设置为true（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>

---

我在图像上选择了一个热点，即身体某一部分的圆圈，但从来没有选择过整个肢体。我被难住了。

最快/最简单的方法可能是使用

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

这些演示表明，它将完全满足您的需求：

通过调用

$（'img'）.mapster（选项）

，ImageMapster将尝试绑定到具有关联映射的每个图像。可以使用

$（'area'）.mapster（'select'）

选择图像地图中的区域。该项目有很多选项和功能

下面是一些基本示例的代码：

---

您需要做的是为您希望单击的区域创建图像地图，并使其发生变化。如果您没有Photoshop或Firework，并且正在寻找免费服务，请尝试。

我在上面的代码中有这些区域的图像地图……我包括3个区域，这不是我要问的问题。我想点击这些区域，让它们用颜色填充，并将一个隐藏变量设置为值1。在这种情况下，您需要添加一些JavaScript；jQuery插件可能是最好/最简单的。Maphighlight或ImageMapster都会出现在脑海中：|感谢您的回复。我之前一直在尝试找出mapster，但没有成功地做任何有用的事情。自从我昨天看到你的回复后，我已经查看了一些演示和它们的文档，但是我的无法正常工作。我在JS有点不在行，你介意看看我的吗？我跟踪了他的所有演示，但都没有成功：我对ImageMapster不是很在行，尽管我已经在几个项目中使用过它。一旦我让它工作起来（通常有这么多的帮助），它工作得很好。我建议你把上面的问题，用这个小把戏，放到一个新的问题中（确保你同时使用jQuery和imagemapster标签），我相信你会在半小时内得到答案。最美好的祝福！