Заполните карту изображения по щелчку и установите переменную

Question

У меня есть карта изображения человеческого тела, которую я выделил в 3 зоны (для простоты): тело, правую ногу и левую ногу.

Я хочу, чтобы можно было щелкнуть по части тела, и эта секция изменит цвета (например, заполнить серый) и установите для значения переменной значение true (1) для этого раздела. Все разделы тела, по умолчанию значение 0.

переменные, которые должны быть установлены в

• {Hidden: TORSO}
• {Hidden: RLEG}
• {Hidden: 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.

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 или фейерверка и вы ищете бесплатный сервис, попробуйте Image-Maps.com.