Атрибут class тега <map>
Описание
Атрибут class для тега <map> позволяет назначать один или несколько CSS-классов для стилизации и взаимодействия с картой изображения через JavaScript. Хотя сам элемент <map> не отображается визуально, его классы могут быть полезны для:
- Стилизации связанных элементов
<area> - Логической группировки нескольких карт
- JavaScript-селекции и манипуляций
<img src="interactive-map.png" alt="Интерактивная карта" usemap="#geo-map">
<map name="geo-map" class="geography-map interactive" id="main-map">
<area shape="poly" coords="..." href="europe.html" class="europe-region">
<area shape="circle" coords="..." href="asia.html" class="asia-region">
</map>
Применение в CSS:
<style>
/* Стилизация областей через родительский класс */
.geography-map area {
outline: 2px solid transparent;
transition: outline-color 0.3s;
}
.geography-map area:hover {
outline-color: rgba(0,150,255,0.5);
}
/* Специфические стили для регионов */
.europe-region { cursor: pointer; }
.asia-region { cursor: crosshair; }
</style>
Использование в JavaScript:
<script>
// Получение карты по классу
const geoMap = document.querySelector('.geography-map');
// Добавление обработчиков для всех областей
geoMap.querySelectorAll('area').forEach(area => {
area.addEventListener('mouseenter', function() {
console.log('Наведено на:', this.className);
});
});
</script>
Рекомендации по именованию классов:
- Используйте осмысленные имена (
interactive-map) - Придерживайтесь единого стиля (kebab-case рекомендуем)
- Избегайте избыточных классов (1-2 основных достаточно)
- Для сложных проектов применяйте методологии (BEM)
Пример с BEM-нотацией:
<map name="product-map" class="product-map">
<area shape="rect" coords="..."
class="product-map__region product-map__region--featured">
<area shape="circle" coords="..." class="product-map__region">
</map>
<style>
.product-map__region {
cursor: help;
}
.product-map__region--featured {
outline: 2px dashed gold;
}
</style>
Ограничения:
- Стили применяются только при наведении/фокусе
- Не все CSS-свойства работают с
<area> - Визуальное оформление ограничено outline и cursor
Примечание: Хотя атрибут class для <map> имеет ограниченное применение, он может быть полезен для организации кода и добавления базовой интерактивности. Для сложных интерактивных карт рассмотрите использование SVG или Canvas с более широкими возможностями стилизации.