Карта изображений для html

: The Image Map element

The name attribute gives the map a name so that it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the name attribute must not be equal to the value of the name attribute of another element in the same document. If the id attribute is also specified, both attributes must have the same value.

Examples

Image map with two areas

Click the left-hand parrot for JavaScript, or the right-hand parrot for CSS.

HTML

map name="primary"> area shape="circle" coords="75,75,75" href="https://developer.mozilla.org/docs/Web/JavaScript" target="_blank" alt="JavaScript" /> area shape="circle" coords="275,75,75" href="https://developer.mozilla.org/docs/Web/CSS" target="_blank" alt="CSS" /> map> img usemap="#primary" src="parrots.jpg" alt="350 x 150 picture of two parrots" /> 

Result

Technical summary

Content categories	Flow content, phrasing content, palpable content.
Permitted content	Any transparent element.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	No role permitted
DOM interface	HTMLMapElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 13, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML Изображение карта

С помощью карты изображений, можно добавлять интерактивные области на изображение.

Карта изображений

Тег определяет изображение-карту. Изображение-карта — это изображение с кликабельными областями.

Нажмите на компьютер, телефон или чашку кофе на изображении ниже:

Пример

Вот исходный код HTML для приведенной выше карты изображений:

Как это работает?

Идея карты изображений заключается в том, что вы должны иметь возможность выполнять различные действия в зависимости от того, где в изображении вы нажимаете.

Для создания карты изображений вам понадобится изображение и карта, содержащая некоторые правила, описывающие кликабельные области.

Создание изображения

Изображение вставляется с помощью тега . Единственное отличие от других изображений заключается в том, что вы должны добавить атрибут usemap :

Значение usemap начинается с хэштега # затем следует имя карты изображений, и используется для создания связи между изображением и картой изображений.

Совет: Вы можете использовать любое изображение в качестве карты изображений.

Создание карты изображений

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

Атрибут name должен иметь то же значение, что и атрибута usemap .

Примечание: Вы можете вставить элемент в любом месте, где вам нравится, он не должен быть вставлен сразу после изображения.

Создание области

Затем добавьте кликабельные области.

Кликабельная область определяется с помощью элемента .

Форма

Вы должны определить форму области, и вы можете выбрать одно из этих значений:

• rect — определяет прямоугольную область
• circle — определяет круговую область
• poly — определяет полигональную область
• default — определяет всю область

Вы также должны определить некоторые координаты, чтобы иметь возможность разместить кликабельную область на изображении.

Shape=»rect»

Координаты для shape= «rect» приходят парами, один для оси x и один для оси Y.

Координата 34, 44 находится на расстоянии 34 пикселей от левого края и 44 пикселей от верхнего:

Координата 270, 350 находится на расстоянии 270 пикселей от левого края и 350 пикселей от верхнего:

Теперь у вас достаточно данных для создания кликабельной прямоугольной области:

Это область, которая становится кликабельной и отправляет пользователя на страницу computer.htm:

Shape=»circle»

Чтобы добавить область круга, сначала найдите координаты центра круга:

Затем укажите радиус окружности:

Теперь у вас есть достаточно данных, чтобы создать кликабельную круговую область:

Это та область, которая становится кликабельной и отправляет пользователя на страницу coffee.htm :

Shape=»poly»

shape=»poly» содержит несколько координатных точек, которые создают фигуру, образованную прямыми линиями (многоугольник).

Это может быть использовано для создания любой формы.

Например, в форме круассана!

Как мы можем сделать круассан на изображении ниже кликабельной ссылкой?

Мы должны найти координаты x и y для всех краев круассана:

Координаты делятся на пары: одна для оси x, другая для оси y:

Пример

Это та область, которая становится кликабельной и отправляет пользователя на страницу «croissant.htm»:

name attribute of the

The element contains a number of tags, that define the clickable areas in the image-map.

Изображение карта с JavaScript

Кликабельная область не обязательно должна быть ссылкой на другую страницу, она также может вызвать функцию JavaScript.

Добавить событие click элемент для выполнения функции JavaScript:

Пример

Вы можете использовать атрибут onclick для выполнения функции JavaScript при щелчке области.

Краткое содержание

• Используйте HTML элемент для определения карты изображений
• Используйте HTML элемент для определения кликабельных областей на карте изображений
• Используйте HTML атрибут usemap самого элемента для указания на карту изображений

HTML Теги изображений

Тег	Описание
	Определяет изображение
	Определяет изображение-карта
	Определяет активную область внутри изображении-карты
	Определяет контейнер для нескольких ресурсов изображений

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.

Мы только что запустили
SchoolsW3 видео

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

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

Источник

Создание карты изображений в HTML

Карта изображений (Image Map) позволяет привязывать ссылки к фрагментам изображения. Щелкая мышью на отдельных частях изображения, пользователь может переходить по той или иной ссылке на разные Web-страницы.

Карта изображения определяется парным тегом

. HTML-документ может содержать несколько карт изображения, поэтому каждой карте должно быть присвоено уникальное имя, которое определяется атрибутом name.

Карта изображения состоит из участков изображения и соответствующих им ссылок. Описывает участок изображения и ставит ему в соответствие ссылку одиночный тег .

Атрибуты тега

Координаты по умолчанию измеряются в пикселях.

Начало отсчета координат – это верхний левый угол экрана, т.е.

Примеры различных форм областей карты изображений

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

Чтобы использовать изображение, как карту, в тег необходимо ввести дополнительный атрибут usemap, определяющий имя карты изображения. Перед этим именем ставится знак «#».

Пример использования Image Map

При кликах на различные области данного изображения меняется цвет соответствующего текста:

Область 1

Область 2

Область 3

Область 4

Применение технологии Image Map

Технология Image Map применяется в самых различных областях. Однако наиболее часто ее применение можно увидеть при создании графических меню, когда создается одно большое изображение с элементами меню, и каждому участку изображения предписывается определенное действие.

Источник

Читайте также:  Html helper asp net mvc