Как применить стиль к части изображения?

Question

[Kaunov_ivan]

Задача: при наведении на разные элементы картинки делать прозразными эти части.
Исходные данные: только картинка в формате .png.
HTML:

<img src="images/section.png" alt="" usemap="#Map">
					<map name="Map" id="Map">
						<area alt="" title="10" href="#" shape="poly" coords="463,105,115,156,34,123,35,79,81,64,319,27,382,21,462,52" />
						<!--[...]-->
					</map>

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

Comments

[mletov]

Посмотрите в сторону jquery плагинов
davidlynch.org/projects/maphilight/docs
www.outsharked.com/imagemapster

Answer 1

[Kaunov_ivan]

Все предложения выше работают только если нужно снять событие с части изображения, а вот стили к ним применить можно только если наложить SVG - простые формы. Но, если нужно делать прозрачным кусок рисунка (например эфект исчезающей стены) - то решение такое:
0. Нарезать верхнюю картинку(части которой должны пропадать) на назные изображения с прозрачным фоном.
1. Сначала кладете фото-поддон (то что за стенами).
2. Потом положить сверху дивку с кучей изображений, что через position: relative; создают сплошное изображение.
3. А дальше просто применять к каждому из них img:hover {opacity: 0}

Answer 2

[0leg5ergeev]

есть такие map/area, если они ещё поддерживаются.