Атрибут type тега <area>
Описание
Атрибут type для тега <area> указывает MIME-тип ресурса, на который ведёт область изображения-карты. Помогает браузерам и системам предварительно понять тип содержимого до перехода по ссылке.
<img src="file-icons.png" usemap="#filemap" alt="Иконки файлов">
<map name="filemap">
<area shape="rect" coords="0,0,50,50"
href="/document.pdf"
type="application/pdf"
alt="PDF документ">
<area shape="rect" coords="50,0,100,50"
href="/data.json"
type="application/json"
alt="JSON данные">
</map>
Популярные MIME-типы для area:
| Тип контента | MIME-тип | Пример использования |
|---|---|---|
| PDF документ | application/pdf |
Ссылки на документацию |
| JSON данные | application/json |
API эндпоинты |
| ZIP архив | application/zip |
Скачиваемые ресурсы |
| Изображение PNG | image/png |
Галереи изображений |
| Документ Word | application/msword |
Формы для скачивания |
Особенности использования с area:
- Не влияет на отображение самой области image map
- Может использоваться браузером для предварительной подсказки
- Особенно полезен в сочетании с атрибутом
download - Значение должно быть валидным MIME-типом
- Рекомендуется указывать для не-HTML ресурсов
<img src="doc-icons.png" usemap="#docmap" alt="Документы">
<map name="docmap">
<area shape="rect" coords="0,0,80,80"
href="/report.docx"
type="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
download="Отчёт_2023.docx"
alt="Скачать отчёт (DOCX)">
<area shape="rect" coords="80,0,160,80"
href="/presentation.pptx"
type="application/vnd.openxmlformats-officedocument.presentationml.presentation"
download="Презентация.pptx"
alt="Скачать презентацию (PPTX)">
</map>
Практические рекомендации:
- Используйте для файловых ресурсов (PDF, DOCX, XLSX)
- Указывайте точные MIME-типы для API эндпоинтов
- Сочетайте с атрибутом alt для лучшей доступности
- Проверяйте актуальность MIME-типов в реестре IANA
- Для HTML страниц обычно не требуется
Совет: Для сложных интерактивных карт изображений рассмотрите использование SVG с элементами <a> вместо традиционных image maps.