Атрибут download тега <area>
Описание
Атрибут download для тега <area> указывает, что при клике на область изображения-карты ресурс должен загружаться на устройство пользователя, а не открываться в браузере. Этот атрибут работает аналогично атрибуту download для тега <a>.
<img src="worldmap.png" usemap="#downloadmap" alt="Карта для скачивания">
<map name="downloadmap">
<area shape="rect" coords="0,0,100,100"
href="europe-guide.pdf"
download="Европейский_путеводитель.pdf"
alt="Скачать путеводитель по Европе">
<area shape="circle" coords="200,200,50"
href="asia-map.jpg"
download
alt="Скачать карту Азии">
</map>
Особенности работы:
| Характеристика | Поведение |
|---|---|
| Значение атрибута | Необязательное имя файла для сохранения |
| Без значения | Используется оригинальное имя файла |
| Ограничения | Работает только для same-origin URL или данных blob: |
| Браузерная поддержка | Все современные браузеры |
| Безопасность | Не работает для cross-origin ресурсов |
Рекомендации по использованию:
- Используйте для областей, связанных с загружаемыми файлами
- Указывайте понятные имена файлов без спецсимволов
- Для кросс-доменных ресурсов используйте обычные ссылки
- Сочетайте с атрибутом alt для доступности
- Тестируйте на мобильных устройствах
Пример с Blob URL:
<script>
// Генерация файла для скачивания
function createDownloadArea() {
const data = 'Текст для скачивания';
const blob = new Blob([data], {type: 'text/plain'});
const url = URL.createObjectURL(blob);
const area = document.createElement('area');
area.shape = 'rect';
area.coords = '0,0,100,100';
area.href = url;
area.download = 'мой_файл.txt';
area.alt = 'Скачать текстовый файл';
document.querySelector('map').appendChild(area);
}
</script>
Ограничения и обходные пути:
<!-- Для кросс-доменных ресурсов -->
<area shape="rect" coords="0,0,100,100"
onclick="window.open('https://example.com/file.pdf')"
alt="Открыть PDF в новом окне">
Совместимость с разными типами файлов:
- PDF, JPG, PNG - работают с same-origin
- ZIP, EXE - могут требовать серверных заголовков
- Текстовые файлы - хорошо поддерживаются
- Видео/аудио - обычно не требуют скачивания
Примечание: Атрибут download является частью HTML5 и обеспечивает удобный способ загрузки файлов без серверных скриптов, но с ограничениями безопасности.