Возможно ли залить цветом area на map? Или изменить например прозрачность?

Question

[Вячеслав]

Есть такой HTML код

<img src="карта.png" alt="" usemap="#map" />
<map name="map">
    <area shape="poly" coords="114, 2, 142, 2, 143, 82, 116, 81" />
    <area shape="poly" coords="441, 83, 398, 83, 399, 2, 441, 2" />
    <area shape="poly" coords="442, 281, 379, 282, 379, 160, 441, 161" />
    <area shape="poly" coords="142, 4, 398, 5, 400, 84, 441, 85, 441, 161, 379, 161, 379, 283, 441, 282, 441, 324, 116, 323, 115, 82, 143, 82" />
</map>

Возможно ли применить стили к отдельным area? То есть например через jquery назначить класс выбранной area а в css как то указать цвет заливки?

Comments

[Ankhena]

Самое простое перерисовать в SVG.
Или поверх наложить SVG (не знаю, как сделана ваша карта и какого рода области вы выделяете)

[Владислав Лысков]

есть такой плагтн js maphilight сто лет нет обновлялся, но работает

[Вячеслав]

Ещё нашел старый плагин https://github.com/jamietre/ImageMapster, его применил - норм работет

Answer 1

[Андрей Зырянов]

Нет такой возможности. Как вариант, можно наложить сверху закрашенный див и обрезать его через clip-path.