Атрибут hidden тега <map>
Описание
Атрибут hidden для тега <map> позволяет скрыть карту изображения и все её интерактивные области из видимой части страницы. Это глобальный атрибут HTML, который может применяться к любому элементу, включая <map>.
<img src="world-map.png" alt="Карта мира" usemap="#world-map">
<map name="world-map" hidden>
<area shape="rect" coords="0,0,100,50" href="europe.html" alt="Европа">
<area shape="circle" coords="150,75,25" href="asia.html" alt="Азия">
</map>
Особенности работы:
| Состояние | Поведение | Доступность |
|---|---|---|
hidden присутствует |
Карта и её области полностью скрыты | Недоступна для навигации |
| Атрибут отсутствует | Карта активна (по умолчанию) | Области доступны для взаимодействия |
Динамическое управление:
<img src="interactive.png" alt="Интерактивная карта" usemap="#toggle-map">
<button onclick="toggleMap()">Переключить карту</button>
<map name="toggle-map" id="toggleMap">
<area shape="rect" coords="..." href="section1.html" alt="Раздел 1">
</map>
<script>
function toggleMap() {
const map = document.getElementById('toggleMap');
map.hidden = !map.hidden;
}
</script>
Рекомендации по использованию:
- Используйте для временного отключения карты
- Не применяйте для конфиденциальной информации (остаётся в DOM)
- Сочетайте с JavaScript для управления состоянием
- Для полного удаления используйте
remove()
Ограничения:
- Не влияет на связанное изображение (только на области)
- Скрытые области остаются в DOM
- Нет анимации скрытия/появления
Альтернативные подходы:
<!-- 1. Полное удаление -->
<script>
function removeMap() {
document.querySelector('map[name="world-map"]').remove();
}
</script>
<!-- 2. CSS-решение -->
<style>
.hidden-map area {
pointer-events: none;
visibility: hidden;
}
</style>
Примечание: Хотя атрибут hidden позволяет быстро скрыть карту изображения, для сложных сценариев лучше использовать JavaScript-управление с полным удалением или CSS-решения, обеспечивающие более гибкий контроль над отображением.