Атрибут title тега <map>
Описание
Атрибут title для тега <map> задает всплывающую подсказку (tooltip), которая появляется при наведении курсора на связанное изображение или его активные области. Это улучшает пользовательский опыт и доступность.
<img src="world-map.jpg" alt="Карта мира" usemap="#world">
<map id="world" title="Интерактивная карта мира (кликабельные регионы)">
<area shape="rect" coords="..." alt="Европа" href="#europe" title="Европейский регион">
<area shape="rect" coords="..." alt="Азия" href="#asia" title="Азиатский регион">
</map>
Особенности работы:
| Ситуация | Поведение |
|---|---|
| Наведение на изображение | Показывает title карты (если курсор не над активной областью) |
| Наведение на область | Показывает title области (имеет приоритет) |
| Мобильные устройства | Подсказка может не отображаться (зависит от браузера) |
Рекомендации по использованию:
- Используйте краткие и информативные подсказки (50-100 символов)
- Не дублируйте информацию из атрибута alt
- Для важной информации используйте видимые элементы, а не только title
- Проверяйте отображение на разных устройствах
Пример с CSS-стилизацией подсказок:
<style>
/* Стандартные подсказки нельзя стилизовать,
но можно создать свои через псевдоэлементы */
[title]:hover::after {
content: attr(title);
position: absolute;
background: #333;
color: #fff;
padding: 5px;
border-radius: 3px;
font-size: 14px;
}
</style>
<img src="dashboard.jpg" alt="Дашборд" usemap="#dashboard">
<map id="dashboard" title="Интерактивная панель управления">
<area shape="rect" coords="..." title="Статистика посещений" href="#stats">
</map>
Ограничения и совместимость:
- Подсказки не отображаются на сенсорных устройствах
- Время появления/исчезновения зависит от ОС и браузера
- Не рекомендуется для важной информации (ненадежный механизм)
- Для сложных подсказок используйте JavaScript-решения
Примечание: Хотя атрибут title может быть полезен для <map>, для полноценной доступности убедитесь, что вся важная информация также содержится в атрибутах alt элементов <area> или в видимом тексте на странице.