Уютный контейнер для .
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 7 сентября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Пример
Скопировать ссылку «Пример» Скопировано
shape=»poly» coords=»192,2,131,31,112,103,134,160,185,191,585,191,643,155,661,93,637,30,579,1″ href=»/js/» target=»_blank» alt=»JS»> map name=»doka-label»> area shape=»poly» coords=»192,2,131,31,112,103,134,160,185,191,585,191,643,155,661,93,637,30,579,1″ href=»/js/» target=»_blank» alt=»JS»> map> img usemap=»#doka-label»> Скопировать Скопировано Не удалось скопировать
Как пишется
Скопировать ссылку «Как пишется» Скопировано
У тега должен быть атрибут name с уникальным именем, на которое мы будем ссылаться в атрибуте usemap картинки. А внутри тега может быть сколько угодно — они размечают на картинке области-ссылки.
Mixed Messages (Official video)
Как понять
Скопировать ссылку «Как понять» Скопировано
Поскольку тегов может быть очень много, например на картинке с навигацией, без пришлось бы связывать каждый с единственной картинкой. К счастью, служит удобной обёрткой, и ссылаться нужно только на него
Подсказки
Скопировать ссылку «Подсказки» Скопировано
Чтобы связь установилась верно, не забудьте поставить знак # перед именем внутри usemap .
Источник: doka.guide
Map что это в ютубе
Тег используется для создания карты изображения. Карта — это изображение с кликабельными областями, которые могут быть связаны, например, с другой веб-страницей или определённой частью той же самой страницы.
name — задаёт имя карты.
Примеры использования
Создание карты с кликабельными областями:
Использование тега с SVG-изображениями:
Для чего использовать тег
- Создать кликабельное изображение для каталога продукции.
- Связать различные части изображения с информацией или продуктами.
- Создать пользовательское навигационное меню.
Глобальные атрибуты
Ограничения
Тег следует использовать только для карт на стороне клиента. Создавать карты на стороне сервера не рекомендуется, так как они имеют множество ограничений и могут вызвать проблемы с доступностью.
Нюансы
- Если координаты двух или более областей перекрываются, кликабельной будет только первая область, указанная в теге .
- Использование карт может привести к проблемам доступности для пользователей, использующих программы чтения с экрана.
Чем заменить тег
Если вам нужно создать кликабельные области на изображении без , можете использовать CSS или JavaScript для достижения того же эффекта.
Red Flags (ft. Montaigne) OFFICIAL VIDEO
️ Другие теги для графики и мультимедиа
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Источник: htmlacademy.ru
Преимущества использования source map на проектах
less: < dev: < options: < paths: [«assets/css/config», «assets/css/modules», «assets/css/modules/icheck/minimal»] sourceMap: true, sourceMapFilename: ‘/assets/css/core.css.map’, sourceMapRootpath: » //compress: true >, files: < «assets/css/core.css»: «assets/css/core.less» > > >
При запуске будет создан grunt, начнёт обновляться файл core.css.map, а в core.css в самый конец файла добавится строка:/*# sourceMappingURL=/assets/css/core.css.map*. Теперь в Chrome DevTools мы сможем просматривать исходники LESS вот так (в Firebug не работает, но может есть какие-то дополнения, если поискать): т.е. видно прямой reference на blocks.less вместо ссылки на скомпилированный core.css. Можно, конечно, обходиться и без source map, но на большом проекте с множеством LESS-файлов удобство работы с LESS будет ощутимо.
Источник: fuse8.ru