Имею картинку - план этажа.
При наведении на каждый офис - он должен подсвечиваться. только он. подсветку реализую через
opacity: 0.8;.
Но у меня получается подсветить только всю картинку. Какой селектор использовать, чтоб стиль применялся только к части картинки?
П.С. если это невозможно - то каким образом посоветуете решить проблему?
Возможно кто-то посоветует jQuery плагин подходящий.
HTML:
<div class="floorPlan center-block">
<img src="images/plan09.gif" alt="9-й этаж" usemap="#Map" class="center-block"/>
<map name="Map" id="Map">
<area alt="Кабинет 908-1" title="908-1" href="#" shape="poly" coords="112,257,201,257,202,228,187,214,180,196,177,178,175,161,175,154,112,153" />
<area alt="Кабинет 908-2" title="908-2" href="#" shape="poly" coords="209,259,208,227,202,221,193,212,187,199,183,188,181,172,182,152,346,154,347,259" />
<area alt="Кабинет 907" title="907" href="#" shape="rect" coords="351,154,444,259" />
<area alt="Кабинет 906" title="906" href="#" shape="rect" coords="490,259,449,156" />
<area alt="Кабинет 905" title="905" href="#" shape="poly" coords="524,116,496,115,494,27,526,32,534,32,537,50" />
<area alt="Кабинет 904" title="904" href="#" shape="rect" coords="451,116,489,8" />
<area alt="Кабинет 903-2" title="903-2" href="#" shape="rect" coords="447,115,399,7" />
<area alt="Кабинет 903-1" title="903-1" href="#" shape="rect" coords="391,116,309,9" />
<area alt="Кабинет 902" title="902" href="#" shape="poly" coords="300,113,209,115,206,50,255,50,254,7,302,9" />
<area alt="Кабинет 901" title="901" href="#" shape="poly" coords="202,113,113,115,113,8,203,10,249,8,251,45,205,48" />
</map>
</div>
Простой
