Атрибут style тега <area>
Описание
Атрибут style для тега <area> позволяет задавать CSS-стили непосредственно для элемента. Однако важно понимать, что области image-map не отображаются визуально, поэтому стили применяются только программно.
<img src="interactive.png" usemap="#styledmap" alt="Пример с областями">
<map name="styledmap">
<area shape="rect" coords="0,0,100,50"
href="#main"
style="cursor: pointer; outline: none;"
alt="Основная область">
</map>
Что действительно работает:
| Свойство CSS | Эффект | Поддержка |
|---|---|---|
cursor |
Изменяет вид курсора при наведении | Хорошая |
outline |
Управляет контуром при фокусе | Ограниченная |
pointer-events |
Контролирует реакцию на события | Частичная |
Рекомендации по применению:
- Важно: Не пытайтесь использовать визуальные стили (color, background) - они не работают
- Лучше применять CSS через классы в отдельном стилевом файле
- Для сложных эффектов используйте JavaScript и SVG-карты
- Тестируйте в разных браузерах
<style>
/* Предпочтительный способ через CSS */
.hotspot {
cursor: help;
outline: 2px dotted transparent;
transition: outline-color 0.3s;
}
.hotspot:hover {
outline-color: blue;
}
</style>
<map name="better-map">
<area class="hotspot" shape="circle" coords="100,100,30" href="#info" alt="Информация">
</map>
Альтернативы для визуальных эффектов:
- Используйте SVG с элементами <a> вместо image-map
- Применяйте JavaScript для динамического выделения областей
- Создавайте интерактивные элементы через CSS-спрайты
Совет: Для современной разработки интерактивных изображений лучше использовать SVG или Canvas, а не устаревшие image-map.
Примечание: Хотя атрибут style технически можно использовать с <area>, его функциональность крайне ограничена из-за природы image-map.