Как изменить часть картинки при наведении именно на эту часть?

Question

[Kaunov_ivan]

Имею картинку - план этажа.
При наведении на каждый офис - он должен подсвечиваться. только он. подсветку реализую через 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>

Answer 1

[Евгений Попов]

Самое простое решение - это взять приведенные вами координаты и нарисовать js те же самые многоугольники и реализовать любые эффекты наведения. Второй вариант наложить svg опять же относительные координаты у вас есть.

Comments

[Kaunov_ivan]

а как по Вашему более рационально? svg - никогда не использовал. насколько я понял - нужно перевести имеющуюся картинку в svg для начала, так?

[Евгений Попов]

Kaunov_ivan: я не знаю что у вас за картинка но судя по описанию(план этажа и расширение gif) это вполне себе план ч/б, то да перевести. Ну, а вот первый попавшийся пример с кодом и комментариями как раз про эффекты наведения: www.petercollingridge.co.uk/data-visualisation/mou...

[Kaunov_ivan]

Евгений Попов: спасибо большое. буду разбираться сейчас