Атрибут ismap тега <img>
Описание
Атрибут ismap указывает, что изображение является серверной картой-изображением (image map). Это булевый атрибут, который работает только когда изображение является потомком элемента <a> с атрибутом href.
<a href="imagemap.php">
<img
src="world-map.jpg"
alt="Интерактивная карта мира"
ismap
width="800"
height="400">
</a>
Как это работает:
| Действие | Результат | Пример URL |
|---|---|---|
| Клик по координатам (100,50) | Добавляет координаты к URL | imagemap.php?100,50 |
| Клик по координатам (x,y) | Отправляет координаты на сервер | imagemap.php?x,y |
Сравнение с клиентской картой-изображением:
<!-- Серверная карта (ismap) -->
<a href="map-handler.cgi">
<img src="map.png" ismap alt="Серверная карта">
</a>
<!-- Клиентская карта (usemap) -->
<img src="map.png" usemap="#map1" alt="Клиентская карта">
<map name="map1">
<area shape="rect" coords="0,0,50,50" href="area1.html" alt="Зона 1">
<area shape="circle" coords="100,100,50" href="area2.html" alt="Зона 2">
</map>
Рекомендации по использованию:
- Используйте только для серверной обработки координат
- Всегда добавляйте альтернативный текст (alt)
- Для сложных интерактивных карт предпочтительнее
usemap - Убедитесь, что серверный обработчик корректно принимает координаты
Пример серверной обработки (PHP):
<?php
// imagemap.php
if(isset($_SERVER['QUERY_STRING'])) {
$coords = explode(',', $_SERVER['QUERY_STRING']);
$x = (int)$coords[0];
$y = (int)$coords[1];
// Определяем регион по координатам
if($x > 0 && $x < 100 && $y > 0 && $y < 100) {
header('Location: europe.html');
} else {
header('Location: other-region.html');
}
}
?>
Ограничения и совместимость:
- Поддерживается всеми браузерами
- Требует серверной обработки координат
- Менее гибкий, чем клиентские карты (
usemap) - Не поддерживает сложные формы областей
Примечание: Хотя ismap редко используется в современных веб-приложениях, он может быть полезен для простых случаев, когда обработка должна происходить на сервере. Для большинства сценариев предпочтительнее использовать клиентские карты изображений (usemap) или JavaScript-решения.