Атрибут class тега <area>
Описание
Атрибут class для тега <area> позволяет назначать CSS-классы для стилизации и идентификации областей изображения-карты. Хотя сами области невидимы, классы могут использоваться для логической группировки и взаимодействия через JavaScript.
<img src="interactive-map.png" usemap="#geomap" alt="Интерактивная карта">
<map name="geomap">
<area shape="poly" coords="100,50,150,75,125,125"
href="#europe"
class="continent europe highlight"
alt="Европа">
<area shape="poly" coords="200,100,250,150,225,200"
href="#asia"
class="continent asia"
alt="Азия">
</map>
Основные применения:
| Применение | Пример | Преимущества |
|---|---|---|
| Групповая стилизация | .continent { cursor: pointer; } |
Единообразное поведение |
| JavaScript-взаимодействие | document.querySelectorAll('.highlight') |
Простота выбора элементов |
| Логическая группировка | class="region active" |
Читаемость кода |
Рекомендации по именованию:
- Используйте осмысленные имена (не
class="a1 b2") - Придерживайтесь единого стиля (kebab-case или BEM)
- Избегайте избыточных классов
- Разделяйте функциональные и стилевые классы
Пример с JavaScript:
<script>
// Подсветка всех областей с классом 'highlight'
const areas = document.querySelectorAll('area.highlight');
areas.forEach(area => {
area.addEventListener('mouseenter', () => {
area.title = 'Нажмите для подробностей';
});
});
</script>
Лучшие практики:
- Используйте для логической группировки связанных областей
- Комбинируйте с атрибутами data-* для дополнительной информации
- Избегайте сложных селекторов для областей
- Тестируйте взаимодействие на разных устройствах
Совет: Для сложных интерактивных карт используйте классы совместно с CSS-псевдоклассами (:hover, :focus) для визуальной обратной связи.
Примечание: Хотя классы не влияют на визуальное отображение самих областей, они остаются мощным инструментом для организации кода и добавления интерактивности.