Атрибут data-* тега <map>
Описание
Атрибуты data-* для тега <map> позволяют хранить дополнительную информацию, связанную с картой изображения. Эти пользовательские атрибуты могут быть использованы JavaScript для управления поведением или CSS для особой стилизации интерактивных областей.
<img src="world-map.png" alt="Интерактивная карта мира" usemap="#world-data-map">
<map name="world-data-map"
data-map-version="2.1"
data-author="GeoTeam"
data-created="2023-05-15">
<area shape="rect" coords="..."
data-region="europe"
data-population="746M"
href="europe.html">
<area shape="circle" coords="..."
data-region="asia"
data-population="4.6B"
href="asia.html">
</map>
Основные сценарии применения:
| Применение | Пример | Преимущество |
|---|---|---|
| Хранение метаданных | data-author="TeamA" |
Информация о карте |
| Конфигурация областей | data-zoom-level="3" |
Настройки отображения |
| Динамическое управление | data-active="true" |
Состояние элементов |
Доступ к данным через JavaScript:
<script>
// Получение элемента карты
const worldMap = document.querySelector('map[name="world-data-map"]');
// Чтение данных карты
console.log('Версия карты:', worldMap.dataset.mapVersion);
// Обработка областей
worldMap.querySelectorAll('area').forEach(area => {
area.addEventListener('click', function() {
alert(`Выбрано: ${this.dataset.region} (Население: ${this.dataset.population})`);
});
});
</script>
Использование в CSS:
<style>
/* Стилизация по данным */
area[data-region="europe"] {
cursor: pointer;
}
area[data-population]:hover::after {
content: attr(data-population);
/* Стили для тултипа */
}
</style>
Рекомендации по именованию:
- Используйте осмысленные имена после
data- - Придерживайтесь kebab-case (дефисы между словами)
- Для сложных данных используйте JSON в атрибуте
- Избегайте дублирования информации, доступной через DOM
Пример с JSON данными:
<map name="complex-map" data-options='{"zoomable":true,"maxZoom":5}'>
<area shape="rect" coords="..." data-info='{"id":1,"name":"Region A"}'>
</map>
<script>
const mapOptions = JSON.parse(document.querySelector('map').dataset.options);
if(mapOptions.zoomable) {
// Инициализация функционала зума
}
</script>
Примечание: Хотя атрибуты data-* предоставляют гибкий способ хранения информации, для сложных интерактивных карт с большим объемом данных рассмотрите использование специализированных библиотек (например, Leaflet.js или Google Maps API), которые предлагают более мощные инструменты работы с географическими данными.