Html usemap: Атрибут usemap | htmlbook.ru

Leave a Comment / Html / By /

Атрибут usemap — Учебник HTML

schoolsw3.com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

❮ Назад Атрибуты HTML Далее ❯

Определение и использование

Атрибута usemap указывает на изображение (или объект) как изображение-карту (изображение-карта представляет собой изображения с активными областями).

Атрибут usemap связан с элементами <map> или атрибутом id и создает отношение между <img> и <map>.

Примечание: Атрибут usemap нельзя использовать, если элемент <img> является потомком элемента <a> или <button>.

Применение

Атрибут usemap может использоваться для следующих элементов:

ЭлементАтрибут
<img>usemap
<object>usemap

Примеры

Пример

Изображение-карта с кликабельными областями:

<img src=»planets. gif»width=»145″alt=»Планеты»usemap=»#planetmap»>

<map name=»planetmap»>
 <area shape=»rect» coords=»0,0,82,126″ href=»sun.html» alt=»Sun»>
 <area shape=»circle» coords=»90,58,3″ href=»mercur.html» alt=»Mercury»>
 <area shape=»circle» coords=»124,58,8″ href=»venus.html» alt=»Venus»>
</map>

Попробуйте сами »

Пример

Элемент <object>, использующий карту изображений:

<object data=»planets.gif» usemap=»#planetmap»></object>

Попробуйте сами »

Поддержка браузеров

Атрибут usemap имеет следующую поддержку браузера для каждого элемента:

Элемент
imgДаДаДаДаДа
objectНе поддерживаетДаДаНе поддерживаетНе поддерживает

❮ Назад Атрибуты HTML Далее ❯

ВЫБОР ЦВЕТА
ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3. CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

usemap атрибут HTML теґа img

  • Головна
  • html
  • теґи
  • <img>
  • usemap

Атрибут usemap пов’язує між собою картинку і карту-зображення, що задається за допомогою контейнера <map> (карта -зображення являє собою зображення з інтерактивними областями).

Як такого зв’язку виступає ім’я ідентифікатора, яке вказується в значенні атрибута usemap, і те ж ім’я, задане у атрибута name елемента <map>.

При цьому в <img> ідентифікатор повинен починатися з символу решітки (#).

Нотатка:

Атрибут usemap не може бути використаний, якщо елемент <map> є нащадком елементів <a>

або <map>.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

<img usemap=”#mapname”>

Атрибут usemap може отримувати єдине значення :

#mapname

Хеш-символ («#») і ім’я елемента <map>.

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач

1+

1+

1+

1+

1+

12+

Переглядач

1+

1+

1+

1+

Приклади

  • Приклад 1

Найпростіший приклад використання HTML атрибута usemap теґа <img>

  coords_css_in_ua">


  See the Pen 


  area.coords_css_in_ua by css.in.ua (@css_in_ua)


  on CodePen.

Різниця між HTML 4.01 та HTML5

Немає жодної різниці.

Різниця між XHTML та HTML

Немає жодної різниці.

Атрибут карты использования HTML

❮ Назад Все атрибуты HTML Далее ❯

Определение и использование

Атрибут usemap определяет изображение (или объект) как карту изображения (карта изображения — это изображение с областями, на которые можно щелкнуть).

Атрибут usemap связан с <картой> имя элемента или атрибут id и создает отношения между и <карта> .

Примечание: Атрибут usemap нельзя использовать, если

элемент является потомок или <кнопка> элемент.

Применяется к

Атрибут usemap может использоваться для следующих элементов:

Элементы Атрибут
карта использования
<объект> карта использования

Примеры

Пример

Карта-изображение с интерактивными областями:

Планеты

<карта имя="карта планеты">
Sun
Mercury
Venus


Попробуйте сами »

Пример

Элемент , использующий карту изображения:

gif» usemap=»#planetmap»>

Попробуйте сами »

Поддержка браузера

Атрибут usemap имеет следующую поддержку браузера для каждого элемента:

Элемент
изображение Да Да Да Да Да
объект Не поддерживается Да Да Не поддерживается Не поддерживается

❮ Предыдущий Все атрибуты HTML Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.
CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

»

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Атрибут
Теги HTML Руководство по добавлению изображений в веб-документы
Что делает ?
Указывает карту изображения на стороне клиента, которая будет использоваться с изображением.

Содержание

  • 1 Пример кода
  • 2 Что такое карта изображений?
  • 3 Разметка карты изображений
  • 4 Карты изображений и масштабирование изображений
  • 5 Инструменты и руководство
  • 6 Поддержка браузером usemap

Пример кода 

  png" usemap="карта фигур">
<имя карты="фигуры-карта">

Что такое карта изображений?

Карта изображения — это метод пользовательского интерфейса, в котором пользователь может щелкнуть в любом месте внутри изображения, а местоположение щелчка влияет на результат щелчка. Идея состоит в том, что нажатие на разные части изображения создает разные эффекты. Например, изображение может быть картой Соединенных Штатов, и щелчок в пределах границ определенного штата приводит к странице об этом штате. Карты изображений бывают двух видов:

  • карты изображений на стороне сервера
  • карты изображений на стороне клиента

Атрибут usemap указывает, что изображение будет использовать карту изображений на стороне клиента.

Разметка карты изображения

Клиентская карта изображения состоит из двух частей. Изображение с атрибутом usemap и сама карта. Карта использования должна идентифицировать имя из , которое будет использоваться. (Это означает, что элемент карты должен иметь уникальное имя.) Разметка выглядит так:

Внутри Элемент — это один или несколько элементов , определяющих кликабельные участки карты.

   Flamingo. Не фламинго.<img class= " title="Не фламинго." href=" /wp-content/uploads/no-flamingo.jpg" target="_blank" shape="poly" coords="1,5,6,418,95,418,133,361,152,335,176,312,194,298,213,286,213,231,215,192,222,156,231,118, 237,97,252,68,266,46,280,30,295,23,314,20,330,18,348,16,360,16,377,20,396,32,412,39,417,46,422,53,426,63,431,74,432,84,432,93,432,108,434,124,434,138,4 33 150 430 167 430 174 431 182 435 193 442 203 443 223 452 283 575 348 583 352 637 417 635,4" />

Карты изображений и масштабирование изображений 900 06

К сожалению, изображение карты работают правильно только в том случае, если вы можете быть уверены, что изображение будет отображаться в точном реальном размере — они не масштабируются и не адаптируются к адаптивному размеру. Посмотрите, что происходит с картой изображения ниже (такой же, как в примере кода выше). , но с изображением, увеличенным до 100% собственного контейнера.

    png" target="_blank" />

Если размер вашего браузера не подходит, вы должны заметить, что интерактивные области не совпадают с фигурой. картинки правильно. Спецификация W3C для карт изображений указывает, что браузеры должны принимать масштабируемые, основанные на процентах <область> координат. Однако в настоящее время ни один браузер не реализует эту функцию. Однако есть надежда, если вам действительно нужны масштабируемые карты изображений. Вы можете попробовать Image Map Resizer, плагин JavaScript, который должен изменить размер ваших карт соответствующим образом.

Инструменты и руководство

Создавать карты изображений вручную довольно сложно. Большинство людей, которым они нужны, используют генератор карт изображений. Две карты изображений на этой странице были созданы с помощью этого инструмента и этого. Для получения дополнительной информации о картах изображений см.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *