Атрибут usemap тега <img>
Описание
Атрибут usemap связывает изображение с клиентской картой-изображением (image map), определённой элементом <map>. Это позволяет создавать интерактивные области на изображении, каждая из которых может быть кликабельной ссылкой.
<img
src="world-map.jpg"
alt="Интерактивная карта мира"
usemap="#worldmap"
width="800"
height="400">
<map name="worldmap">
<area shape="rect" coords="0,0,100,100" href="europe.html" alt="Европа">
<area shape="circle" coords="200,200,50" href="asia.html" alt="Азия">
<area shape="poly" coords="300,100,400,200,350,300" href="africa.html" alt="Африка">
</map>
Синтаксис и параметры:
| Компонент | Пример | Описание |
|---|---|---|
| Ссылка на карту | usemap="#mapname" |
Связывает изображение с элементом <map> |
| Форма области | shape="rect|circle|poly|default" |
Определяет форму кликабельной области |
| Координаты | coords="x1,y1,x2,y2" |
Задаёт координаты области в пикселях |
Типы областей и их координаты:
<img src="shapes.jpg" usemap="#shapemap" alt="Пример фигур">
<map name="shapemap">
<!-- Прямоугольник: левый верхний и правый нижний углы -->
<area shape="rect" coords="0,0,100,50" href="rectangle.html" alt="Прямоугольник">
<!-- Круг: центр X, центр Y, радиус -->
<area shape="circle" coords="200,75,50" href="circle.html" alt="Круг">
<!-- Полигон: последовательность X,Y точек -->
<area shape="poly" coords="350,25,400,75,300,75" href="triangle.html" alt="Треугольник">
</map>
Рекомендации по использованию:
- Всегда указывайте альтернативный текст (
alt) для каждой области - Для сложных форм используйте полигоны (
shape="poly") - Тестируйте на мобильных устройствах (может быть неудобно для touch-интерфейсов)
- Сочетайте с CSS-эффектами для лучшей визуализации активных областей
Стилизация и интерактивность:
<style>
.image-map-container {
position: relative;
}
.image-map-container img {
display: block;
}
.map-highlight {
position: absolute;
background: rgba(255, 255, 0, 0.3);
border: 2px solid yellow;
pointer-events: none;
}
</style>
<div class="image-map-container">
<img src="map.jpg" usemap="#interactiveMap" alt="Интерактивная карта">
<div id="highlight" class="map-highlight" hidden></div>
</div>
<map name="interactiveMap">
<area shape="rect" coords="0,0,100,100" href="#" alt="Зона 1"
onmouseover="showHighlight(0,0,100,100,'rect')"
onmouseout="hideHighlight()">
</map>
<script>
function showHighlight(x1,y1,x2,y2,shape) {
const hl = document.getElementById('highlight');
hl.hidden = false;
hl.style.left = x1 + 'px';
hl.style.top = y1 + 'px';
hl.style.width = (x2-x1) + 'px';
hl.style.height = (y2-y1) + 'px';
}
function hideHighlight() {
document.getElementById('highlight').hidden = true;
}
</script>
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- На мобильных устройствах может быть менее удобен
- Для сложных интерактивных карт лучше использовать SVG
- Координаты должны быть актуальны для текущего размера изображения
Примечание: Хотя клиентские карты изображений (usemap) являются устаревшей технологией, они всё ещё полезны для простых случаев. Для сложных интерактивных изображений рассмотрите использование SVG с элементами <a> или JavaScript-решений.