Стилизация карты изображения

Question

Можно ли стилизовать <map> и <area>?
Если нет, то каков самый простой (и самый современный) способ стилизации различных зон одного изображения?

Что приятно в <map> и <area> в том, что с генератором карт изображений вам не нужно рассчитывать положение каждой зоны.Но, похоже, что хотя есть атрибут href, вы не можете стилизовать области.

Я хочу, чтобы зоны имели {background-color: black; opacity: 0.5;} и :hover {opacity: 0;}

Я мог бы сделать каждую зону отдельнойизображение, но тогда мне придется собрать их в одно изображение, и я никогда не буду удовлетворен этим.

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

Если у кого-нибудь есть более легкое решение для JavaScript, чем http://www.netzgesta.de/mapper/, мне тоже интересно.

Answer 1

Если вы работаете с картами изображений, я бы посоветовал вам взглянуть на плагин ImageMapster JQuery , он действительно может помочь со многими задачами манипуляции с картами изображений.

Он может настроить прозрачностьи цвет фона для выбранных и парящих зон, как вы хотите, и когда-либо объединяете разные зоны в одной области, заставляя их работать вместе.

Я не пробовал Mapper, который вы назвали, потому что это некоммерческая лицензия,что не удовлетворяет мои потребности разработчика.Но я попробовал ImageMapster сам, и мне нравится, как он работает - это мощный инструмент под лицензией MIT, разветвленный от более старого плагина MapHighlite.

И насчет легкого ... Я сомневаюсь, что это очень важный вопрос, потому что код JavaScript работает в браузере,и не замедляйте свой сервер.А в случае DOM / стилей манипуляции работают очень быстро.

Answer 2

Вы можете сделать изображение фоновым изображением и поместить невидимые <a> s поверх display:block;position:absolute; и т. Д., А затем, когда вы наводите курсор мыши на них, вы можете сделать их полупрозрачными цветами или добавить границы или что-то еще ...это, вероятно, выглядело бы неплохо и было бы относительно просто:)

edit: example