map в HTML


Содержание
Илон Маск рекомендует:  Asp использование объектов iis admin

HTML тег

Элемент (от англ. «map» ‒ «карта») создаёт карту-изображение.

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

Цель использования — в связывании элемента с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в , задаваемого атрибутом usemap, так и в , устанавливаемого атрибутом name.

Синтаксис

Закрывающий тег

Атрибуты

Элемент поддерживает глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент со следующими значениями CSS по умолчанию:

Различия между HTML 4.01 и HTML5

В HTML5, если у элемента указан глобальный атрибут , то он должен иметь то же значение, что и атрибут name .

HTML :: Карты-изображения

Определение карты-изображения

Изображения на веб-странице можно использовать в качестве гиперссылок, для этого нужно поместить тег между открывающим и закрывающим тегами гиперссылки. В результате при клике по любой области данного изображения пользователь перейдет по адресу, указанному в атрибуте href элемента ‘a’. Однако иногда возникает потребность в том, чтобы различные области (части) одного и того же изображения являлись отдельными гиперссылками, ведущими в совершенно разные места. В этом случае приходится использовать карту-изображение, которое как раз и позволяет хранить в себе сразу несколько гиперссылок.

(от англ. image map) – это изображение, содержащее специальные активные зоны, являющиеся гиперссылками.

Атрибуты ismap и usemap

Карты-изображения применяются в двух вариантах: и , которые задаются, соответственно, атрибутами ismap и usemap элемента ‘img’ . Первый атрибут является логическим и не принимает значений, являясь индикатором, а второй – в качестве значения принимает имя специального элемента ‘map’ , перед которым ставится знак решетки. Рассмотрим эти два вида графических карт подробнее.

Илон Маск рекомендует:  FloatToStr - Функция Delphi

Серверные карты-изображения

Серверные карты-изображения строятся следующим образом: создается элемент ‘a’ , атрибут href которого указывает адрес программы-обработчика, расположенной на сервере, затем внутри гиперссылки ‘a’ располагается элемент ‘img’ , у которого указывается атрибут ismap . При нажатии по какой-либо активной зоне такого изображения, на сервер будут переданы координаты x и y щелчка мыши, которые отсчитываются от верхнего левого угла изображения. Координаты отправляются на сервер методом GET , т.е. передаются вместе с адресом серверной программы-обработчика, указанного в атрибуте href гиперссылки, непосредственно в самом адресе и перечисляются через запятую после знака вопроса. На сервере программа-обработчик принимает координаты и решает, какой документ необходимо отправить в ответ. Рассмотрим конкретный код, показанный в примере №1. Отображение соответствующей страницы в браузере показано на рис. №2.

Пример №1. Формирование серверной карты-изображения

Рис. №2. Отображение страницы с использованием серверной карты-изображения браузером

Если мы кликнем, например, по прямоугольнику, на сервер будут переданы координаты x и y клика. Программа проверит в какой диапазон попадают данные координаты и после проверки вернет нам веб-страницу с описанием свойств прямоугольника.

Клиентские карты-изображения, теги и

Клиентские карты-изображения, наоборот, располагаются полностью на компьютере пользователя и строятся с использованием элементов ‘map’ и ‘area’ . Элемент ‘map’ формируется парным тегом (от англ. map – карта). Он связывается с картой-изображением через свой атрибут name . Значение данного атрибута должно совпадать со значением атрибута usemap (знак решетки при этом нужно опускать) соответствующего элемента ‘img’ , выступающего в роли клиентской карты-изображения. Кроме того, элемент ‘map’ является контейнером для хранения элементов ‘area’ , каждый из которых определяет активную область карты-изображения и превращает их в гиперссылки. Формируется элемент ‘area’ при помощи одиночного тега (от англ. area – область, регион), т.е. является пустым элементом (см. пример №3).

Пример №3. Формирование клиентской карты-изображения

Поскольку элемент ‘area’ служит для создания гиперссылок, то он обладает всеми атрибутами элемента ‘a’ : href , target , download , rel , hreflang , type (смотреть). Кроме того, он связан с изображением и служит для определения его активных зон, поэтому обладает еще и дополнительными атрибутами: alt , shape и coords (от англ. coordinates).

Атрибут alt задает альтернативный текст для данной активной зоны изображения.

Атрибут shape определяет форму данной активной зоны изображения, а coords задает для нее координаты в пикселях, которые отсчитываются от верхнего левого угла изображения, где считается, что x=0px и y=0px . В качестве значений shape принимает:

  • «circle» – область в виде окружности; через запятую указываются координаты x и y центра окружности, а также ее радиус, например, coords=»150, 200, 120″ ;
  • «default» – вся область изображения;
  • «poly» (от англ. polygon) – область в виде произвольного многоугольника; через запятую указываются координаты x , y его вершин, начиная с любой и заканчивая обход в стартовой точке, например, coords=»50,70, 64,82, 85,82, 130,60, 50,70″ ;
  • «rect» (от англ. rectangle) – область в виде прямоугольника; через запятую указываются координаты x , y левого верхнего и правого нижнего углов, например, coords=»50,70, 154,213″ .

Внешне результат отображения страниц, содержащих одно и то же изображение, но используемое в одном случае, как серверная карта-изображение, а в другом, как клиентская карта, будет одинаков. Результат использования также будет выглядеть для пользователя практически одинаково. Тогда возникает вопрос, зачем применять два вида карт? Все очень просто и зависит от ситуации. Если изображение небольшое, например, графическое меню, то конечно же используется клиентская карта-изображение, поскольку изображение быстро загружается на компьютер пользователя, и отсутствует необходимость каждый раз при нажатии на активную зону посылать запрос на сервер, тем самым дополнительно загружая его и заставляя ждать ответа. Однако, если карта очень большая, например, представляет спутниковый снимок города, и при выборе объектов на этом снимке должна загружаться отдельная страница с описанием и фото данного объекта, то загружать ее на компьютер пользователя становится проблематично, т.к. размеры таких карт могут исчисляться мегабайтами одних только координат.

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

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

в HTML

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

Обязательный атрибут Name элемента связывается с атрибутом usemap и создает связь между изображением и картой.

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

Элемент
Да Да Да Да Да

Различия между HTML 4,01 и HTML5

Примечание: В HTML5, если также указан атрибут ID тега , он должен иметь то же значение, что и атрибут Name.

Различия между HTML и XHTML

В XHTML атрибут name является устаревшим и будет удален. Используйте атрибут глобального идентификатора Вместо.

HTML Image Maps

With image maps, you can add clickable areas on an image.

Image Maps

The tag defines an image-map. An image-map is an image with clickable areas.

Click on the computer, the phone, or the cup of coffee in the image below:

Example

How Does it Work?


The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.

To create an image map you need an image, and a map containing some rules that describe the clickable areas.

The Image

The image is inserted using the tag. The only difference from other images is that you must add a usemap attribute:

The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.

Note: You can use any image as an image map.

The Map

Then add a element.

The element is used to create an image map, and is linked to the image by using the name attribute:

The name attribute must have the same value as the usemap attribute.

Note: You may insert the element anywhere you like, it does not have to be inserted right after the image.

The Areas

Then add the clickable areas.

A clickable area is defined using an element.

Shape

You must define the shape of the area, and you can choose one of these values:

  • rect — defines a rectangular region
  • circle — defines a circular region
  • poly — defines a polygonal region
  • default — defines the entire region

Coordinates

You must define some coordinates to be able to place the clickable area onto the image.

The coordinates come in pairs, one for the x-axis and one for the y-axis.

The coordinates 34, 44 is located 34 pixels from the left margin and 44 pixels from the top:

The coordinates 270, 350 is located 270 pixels from the left margin and 350 pixels from the top:

Now you have enough data to create a clickable rectangular area:

This is the area that becomes clickable and will send the user to the page computer.htm:

Circle

To add a circle area, first locate the coordinates of the center of the circle:

Then specify the radius of the circle:

Now you have enough data to create a clickable circular area:

This is the area that becomes clickable and will send the user to the page coffee.htm:

Image Map and JavaScript

A clickable area does not have to be a link to another page, it can also trigger a JavaScript function.

Example

You can use the onclick attribute to execute a JavaScript function when the area is clicked

HTML тег map

Тег определяет карту-изображение.

Обязательный атрибут name элемента ассоциируется с атрибутом usemap элемента и связывает карту с изображением.

Разница между HTML 4.01 и HTML5

В HTML5 если также определяется атрибут id, то он должен иметь то же значение, что и атрибут name.

В XHTML атрибут name считается устаревшим, вместо него следует использовать общий атрибут id.

Атрибут Описание
name Определяет имя карты-изображения

Общие атрибуты

HTML пример

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

CSS стили по умолчанию

Большинство браузеров будут отображать тег со следующими стилями

HTML тег

Тег используется для создания карт-изображений. Для определения активных областей (координаты, форма, размеры и т.д) карты-изображения, используется тег . При нажатии на активную область изображения происходит определенное действие, например, переход на страницу с подробной информацией.

Тег используется также с элементом , чтобы связать его с клиентской картой-изображением. Для этого применяется единый идентификатор, который в теге задается атрибутом usemap , а в теге — атрибутом name .


В HTML5, если у элемента указан глобальный атрибут id , то он должен иметь то же значение, что и атрибут name .

Рисуем карту изображения мышкой

Теория

Начнём пожалуй с теории, куда ж без неё. Карта изображения содержит в себе два тега: map — контейнер карты и area — зона выделения. Карта не ограничена одной зоной и может содержать неограниченное их количество. Тег area кроме стандартных атрибутов имеет и свои собственные:

  • coords — координаты зоны выделения
  • href — ссылка, на которую будет произведён переход при клике на зону
  • nohref — указывает на то, что зона не содержит ссылки
  • shape — форма выделения
    • circle — зона выделения в виде круга
    • default — выделяет всю зону изображения
    • poly — зона выделения в виде многоугольника
    • rect — зона выделения в виде прямоугольника
  • target — определяет где будет открываться ссылка

Чтобы подключить карту к изображению, указываем тегу map атрибут name с произвольным именем, а на изображения вешаем тег usemap, значение которому указываем в формате «#имя».

Так как зона выделения у меня должна была быть многоугольной, значение атрибута shape, тега area, мы указываем как poly — полигональная область. В таком режиме через запятую указываются координаты точки относительно левого верхнего угла — x,y. Точки также разделяются запятыми, что по началу при чтении такого кода вызывает недоумение.

Пишем Paint

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

Для начала подготовим вёрстку:

В #bar будут вставляться кнопки для управления «пеинтом».
В #info будет выводится сгенерированный html код.

В javascript’е всё достаточно просто. В процессе написания я использовал свою боевую библиотечку, так что не удивляйтесь нестандартным функциям. Для начала повесим событие mousedown на #canvas, в котором будет рендериться точка на изображении и записываться её координаты.

Затем напишем функцию, которая будет генерировать html код нашей карты.

Обрамим всё в класс, немного вспомогательных функций, вот и всё. Надеюсь кому-то будет полезна сея тулза.

Ссылки

PS. Добавил ссылку на гитхаб.
PS2. Теперь «paint» работает на канвасе.

в HTML

Всем привет!
Продолжаем изучать основы HTML. . Карту изображений еще называют навигационной картой, но это не так уж и важно.
Давайте выясним, что такое карта изображения (навигационная карта) и где ее можно использовать на практике.

Карта изображения (навигационная карта) – это картинка, на которой размещается одна или несколько указанных областей для ссылок.

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

В примере использовалась одна картинка, где область и путь перехода разный

Вот сейчас научимся создавать что-то подобное.

Для того чтобы создать карту изображения, вам потребуется вспомнить, как вставить картинку и ссылку на веб страницу.
Переходим к практике.

Как сделать карту изображения в HTML

Чтобы создать карту изображения в HTML, вставьте вот такой каркас:

○ тег map

Тег — это главный контейнер для создания карты изображения, внутри которого содержатся другие теги, такие как .
Закрывающий тег обязательный.

* атрибуты тега map

название карты
Обязательно карте нужно дать имя и для этого используют атрибут «name» :

○ тег area

Тег — этот тег предназначен для указания геометрической области со ссылкой.

* атрибуты тега area

как определить форму области

Чтобы определить форму области (прямоугольник, круг, многоугольник) используют для тега атрибут «shape» с такими значениями:

  • rect — Прямоугольник. Пример: shape=»rect» ;
  • circle — Круг. Пример: shape=»circle» ;
  • poly — Многоугольник. Пример: shape=»poly»

как указать расположение геометрической формы

Чтобы указать расположение геометрической формы (прямоугольником, кругом, многоугольником) используют для тега атрибут «coords» .

В атрибуте «coords» и задаются все параметры размещения геометрической фигуры по такой схеме:

Прямоугольная область

Обратите внимание на вертикальную ось « y » и горизонтальную ось « x ». Вот по этим осям и задаются параметры.

Круглая область

Многоугольная область

Создаем карту изображения в HTML

Прямоугольник

К примеру, у меня есть вот такая картинка прямоугольников:


Вставим картинку в html документ:

Теперь создаем блок для карты изображения и даем ему любое название через атрибут «name» , к примеру «karta1»

Далее связываем картинку с картой. Для этого и нужно было дать название к карте. Чтобы связать карту, пропишите к картинке атрибут «usemap» :

Имя карты обязательно должно быть через решетку « # »:

Вот координаты первого прямоугольника:

а вот такие будут ко второму:

Вот готовый код:

Просмотрите готовый код. Вам все понятно, если нет, просмотрите с самого начала теги для создания навигационной карты. Если это не помогло, пишите в комментариях.

А мы смотрим на результат, что же у меня вышло. Попробуйте навести на прямоугольник №1, а потом на №2 (можно нажать, они кликабельны):

Круг

К примеру, у меня есть вот такая картинка круга:

Вот координаты первого круга:

а вот такие будут для второго круга:

Прежде, чем посмотреть готовый код, попробуйте сами написать HTML код и сверить его с моим.

Готовый код будет вот таким:

Еще раз повторюсь в разъяснениях, что я делал в коде:

Строка №1
Вставил картинку в HTML файл и привязал изображение к карте с помощью атрибута «usemap» :

Строка №2
Создал блок для карты изображения и дал карте название для привязки к картинке с помощью атрибута «name» :

Обратите внимание, название карты ( name=»имя» ) должно совпадать с привязкой картинки ( usemap=»#имя» ). Это важно, так как карта изображений работать не будет.

Строка №3 и №4
Указал фигуру и ее координаты, а также привязал к фигуре ссылку

Итак, если вы все правильно сделали, результат будет таким:

Попробуйте навести на круг №1, а потом на №2 (можно нажать, они кликабельны).

Многоугольник

К примеру, у меня есть вот такая картинка фигуры с несколькими углами:

Вот координаты первого многоугольника:

x1=168, y1=9, x2=232, y2=29, x3=200, y3=97, x4=223, y4=129, x5=153, y5=119

а вот такие будут для второго многоугольника:

x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58

Готовый код будет вот таким:

Результат будет вот таким:

Хочу дополнить, что углов может быть столько, сколько вы хотите и сколько вы укажите:

x1, y1 координаты первого угла;
x2, y2 координаты второго угла;
xN, yN координаты последнего угла

ДОПОЛНЕНИЕ:

Комбинированная карта изображений

Карту изображений можно комбинировать сразу с разными фигурами. Что я имею в виду? На одной картинке, могут быть указаны различные области разных фигур.
Вот, к примеру, так:

В примере я указал область для круга и для прямоугольника.

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

Для каждой выбранной области можно прописать подсказки, которые будут появляться, если навести курсор мышки. Для подсказки используют атрибут «title» к тегу «area» :

Наведите курсор мыши на круг, а потом на прямоугольник. Вы увидите, как появятся подсказки, на кружке – «wordpress» , а на прямоугольнике — «Автор блога» .

Вот и освоили карту изображения на HTML. Самое сложное в карте изображений – это вычислить правильно координаты фигуры. Специальной формулы нет и приходится по несколько раз подбирать координат.

Жду вас в следующем уроке. Подписывайтесь на обновления моего блога.

HTML Image Maps

With image maps, you can add clickable areas on an image.

Image Maps

The tag defines an image-map. An image-map is an image with clickable areas.

Click on the computer, the phone, or the cup of coffee in the image below:

Example

How Does it Work?

The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.


To create an image map you need an image, and a map containing some rules that describe the clickable areas.

The Image

The image is inserted using the tag. The only difference from other images is that you must add a usemap attribute:

The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.

Note: You can use any image as an image map.

The Map

Then add a element.

The element is used to create an image map, and is linked to the image by using the name attribute:

The name attribute must have the same value as the usemap attribute.

Note: You may insert the element anywhere you like, it does not have to be inserted right after the image.

The Areas

Then add the clickable areas.

A clickable area is defined using an element.

Shape

You must define the shape of the area, and you can choose one of these values:

  • rect — defines a rectangular region
  • circle — defines a circular region
  • poly — defines a polygonal region
  • default — defines the entire region

Coordinates

You must define some coordinates to be able to place the clickable area onto the image.

The coordinates come in pairs, one for the x-axis and one for the y-axis.

The coordinates 34, 44 is located 34 pixels from the left margin and 44 pixels from the top:

The coordinates 270, 350 is located 270 pixels from the left margin and 350 pixels from the top:

Now you have enough data to create a clickable rectangular area:

This is the area that becomes clickable and will send the user to the page computer.htm:

Circle

To add a circle area, first locate the coordinates of the center of the circle:

Then specify the radius of the circle:

Now you have enough data to create a clickable circular area:

This is the area that becomes clickable and will send the user to the page coffee.htm:

Image Map and JavaScript

A clickable area does not have to be a link to another page, it can also trigger a JavaScript function.

Example

You can use the onclick attribute to execute a JavaScript function when the area is clicked

Image Map: HTML map Tag

Contents

Image Map HTML: Main Tips

  • Using HTML map tags, you can create a clickable map.
  • By clicking the HTML map area, the user will open links provided.
  • The clickable places are defined using elements.
  • You cannot skip the ending tag when creating an HTML image map.

How to Create a Clickable Map

The map tags define an HTML image map. It is an image with clickable areas associated with links:

Note: when creating an image map, HTML element must be included to specify the image you will place the links in.

Theory is great, but we recommend digging deeper!
HTML Coding For Beginners Course: Learn HTML in 1 Hour

Using the Tag

To define the clickable places in an image map, you can use HTML elements. This element is a child of and can only be used within it.

The name Attribute

If you wish to create a clickable image map, HTML tags should also include a attribute. It is required to properly link the map with the image:

HTML map tags also support all the global attributes. However, if you’re using the global id attribute, you need to make sure it matches the name .

Note: the attribute cannot be empty or contain spaces.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL
Attribute Definition
shape The shape of the HTML area: a rectangle, a circle, or a polygon
coords The coordinates of the clickable area
alt The alternative text to display if the image doesn’t load
href The URL address for the hyperlink