Атрибут usemap в HTML


Содержание
Илон Маск рекомендует:  Функции pspell

HTML | usemap Attribute

The HTML usemap attribute is used to specify an image/object as an image-map. It related to a map element’s name or id attribute and creates a relationship between the img and also the map.

Supprorted tags:

Example:

Output:

Supported Browsers: The browsers supported by HTML usemap Attribute are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the «Improve Article» button below.

HTML usemap attribute

usemap

The purpose of the HTML usemap attribute is to associate an image map with an element. The image map is defined by a MAP element. The value of usemap must match the value of the name attribute of the associated MAP element.

Supported elements

HTML type attribute supports img, input and object elements.

Syntax

Where ElementName is any supported element.

Type of value

Default value

There is no default value of HTML usemap attribute.

Supported doctypes

HTML 4.01 strict, HTML 4.01 transitional, HTML 4.01 frameset.

Example of HTML usemap attribute with img element

Result

View this example in a separate browser window

Атрибут usemap в HTML

Learn HTML Code, Tags & CSS

Sharing is caring!

Code Example

What is an image map?

An is a User Interface technique in which a user can click anywhere inside of an image, and the location of the click affects the outcome of the click. The idea is that clicking on different sections of the image creates different effects. For example, the image might be a map of the United States, and clicking within the borders of a particular state leads to a page about that state. There are two kinds of image maps:

Илон Маск рекомендует:  Разметка организаций

The usemap attribute specifies that the image will employ a client-side image map.

Image Map Markup

There are two parts to a client-side image map. The image with the usemap attribute, and the map itself. The use-map must identify the name of the to be used. (This means that the map element must have a unique name.) The markup looks like this:

Image Maps and Image Scaling

Unfortunately, image maps only work properly if you can be certain that the image will be display at its exact real size — they do not scale or adapt to responsive sizing. See what happens to the image map below (the same one as in the Code Example above), but with the image enlarged to 100% of its own container.

Unless your browser is just exactly the right size, you should notice that the clickable areas do not line up with the shape pictures correctly. The W3C’s specification for image maps directs that browsers should accept scalable, percentage-based coordinates. However, no browsers currently implement this feature. There is hope, however, if you really need scalable image maps. You can try the Image Map Resizer, a JavaScript plugin which should make your maps resize appropriately.

Tools and Tutorial

Creating image maps manually is kind of difficult. Most people who need them use an image map generator. The two image maps on this page were created with this tool and this one. For more information on Image Maps, see out Image Map Tutorial.

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

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

Рассмотрим пример как выглядит карта изображений в html:

При наведении курсора мышкой на области зеленого прямоугольника видно, что она является ссылкой на » #green_link » (метка выбрана для примера, можно сделать ссылку на любую страницу в интернете). У красного квадрата на » #red_link «, а у синего круга соответственно на » #blue_link «.

Код этого примера:

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

1. Необходимо создать связку изображения и карты . В изображении нужно сослаться на карту с помощью атрибута usemap=»#primer1″ . А ниже нужно описать код карты.

При создании карты ссылок атрибут usemap является обязательным для тега img.

2. Описание карты состоит из обязательного атрибута name , с помощью которого будет осуществляться привязка к изображению.

Области могут перекрывать друг друга. В этом случае ссылка будет вести на тот объект, что описан последним.

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

1. Атрибут shape=»тип_объекта» — задает тип объекта. Может принимать следующие значения:

  • circle — круг;
  • rect — прямоугольник;
  • poly — многоугольник;

2. Атрибут coords=»значения_координат» — определяет геометрическое расположение объекта и его размеры.

Точкой отчета изображения является верхний левый угол. Т.е. если вы указали отступ 10 по высоте, то это означает 10 пикселей вниз.

В зависимости от типа объекта нужно задавать значения координат в разных форматах. Все значения указывается в пикселях (пометку px писать не нужно).

  • Для типа circle: coords = (x,y,r) , где x,y координаты центра круга, а r — радиус круга;
  • Для типа rect: coords = (x1,y1,x2,y2) , где x1,y1 координаты левой верхней точки прямоугольника, x2,y2 — координаты нижний правой точки прямоугольника;
  • Для типа poly: coords = (x1,y1,x2,y2. xn,yn) , последовательно указываются координаты x,y каждой точки многоугольника;
  • _blank — открывает страницу в новом окне
  • _self — загружает страницу в текущее окно
  • _parent — загружает страницу во фрейм-родитель
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера

5. Атрибут title=»подсказка» — выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »

6. Атрибут nohref — делает область неактивной. Используется при перекрытии объектов. Используется довольно редко, но иногда это может стать незаменимым решением. Например можно сделать маленький круг внутри большого круга неактивным.

Обязательно область nohref должна идти первой.

Использование карты ссылок на изображении имеет место лишь в узком круг задач. Например, при создании какой-то схемы или карты проезда. В других случаях применение карты при создании меню и других графических элементов выглядит необоснованной.

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

Теория

Начнём пожалуй с теории, куда ж без неё. Карта изображения содержит в себе два тега: 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» работает на канвасе.

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

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

Предположим, у нас имеется такой рисунок:

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

В первую очередь обозначим наш рисунок не как обыкновенное графическое изображение, а как навигационную карту присвоив этому рисунку своё индивидуальное имя. Делается это при помощи атрибута usemap тега (я думаю Вам не стоит напоминать о том что тег имеет обязательный атрибут src который указывает путь к той или иной картинке )

Назовём наш рисунок/карту именем panel . Это будет выглядеть так:

Не забываем по правилам синтаксиса поставить знак #решётки перед именем..

Ну а теперь, собственно, составим навигационную карту. Она задаётся тегом у которого есть атрибут name — имя.. улавливаете к чему я веду? Ну как Вы наверное уже догадались, укажем на базе какого рисунка мы будем строить нашу навигационную карту указав его имя..

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

href — указывает путь к открываемому документу (точно так же как в теге )
shape — форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:

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

coords — координаты формы

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


Теперь наша карта приобретает такой вид:

По сути теперь «зелёная» квадратная кнопка стала рабочей.

В чем Вы можете убедится нажав на неё в этом примере:

HTML — Урок 15. Навигационные карты — map

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

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

При серверном варианте эти координаты сначала передаются на сервер, там обрабатываются специальной программой и только после этого происходит переход по ссылке.Очевидно, что клиентские навигационные карты предпочтительнее. Их мы и рассмотрим.

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

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

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

Атрибут usemap в HTML

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

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

Если же ваша картинка обрабатывается сервером («server-side»), то при помощи атрибута ISMAP для команды IMG, то вы можете включить гиперссылки на картинке в ваш документ соответсвенным образом описав их в файле, который определяется командой A (анкер).

В этом примере, информация о картинке хранися в файле с именем Jump.map (формат файла определяется видом сервера, например, CERN или NCSA). Когда пользователь отмечает какой-нибудь элемент на картинке Sample.gif, то сервер получает координаты курсора и выполняет действия соответсвующие этим координатам, которые записаны в файл Jump.map.

Для задания информации о гиперссылках в рисунке, которая включается в HTML документ, используется атрибут USEMAP= в команде IMG. Сама информация о гиперссылках определяется командами MAP и AREA, как это показано ниже:

Чтобы увидеть пример работы активной картинки нажми здесь.

В этом примере картика была размечена равными прямоугольниками (rectangular areas). Одна область является непомеченной, остальные три помечены документами S1.html, S2.html, S3.html соответсвенно.

Команда AREA позволяет также помечать области кругами (CIRCLES) и ломаными (POLYGONS).

Если две или боле областей пересекаются, то просмотрщик выбирает первую из тех, что описаны в команде MAP, непомеченные области никак не отвечают на вызов.

Замечание
MS Internet Exporer не обрабатывет команду «ответ по умолчанию» несмотря на команду

Карта изображения в HTML (навигационные карты). Урок №11

2014-02-04 / Вр:20:27 / просмотров: 18029

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

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

Не бойтесь, это вовсе не сложно. Самое главное – понять теорию и закрепить практикой.

Ну что, приступим к теории.

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

Атрибуты areа

1. Атрибут shape
shape – определяет форму области (прямоугольником, кругом, многоугольником).
Прямоугольник — » rect «. Пример: shape=» rect » ;
круг — » circle «. Пример: shape=» circle » ;
многоугольник — » poly «. Пример: shape=» poly «

2. Атрибут coords
coords – это расположение геометрической формы.

Давайте рассмотрим пример на геометрической форме прямоугольника.

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

Вы уже знаете, что если вам нужна форма прямоугольника, значит нужно прописать в атрибуте shape значение « rect ».

Теперь переходим к координатам.
Точка отсчета начинается с левого верхнего угла картинки, координаты которого (0;0)

Порядок записи координат для атрибута coords будет таким:

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

Для примера с прямоугольником №1 возьмите такие координаты:

x1=25, y1=36, x2=114, y2=98

Вот так будет выглядеть код:

Дальше нужно указать путь(ссылку) для выбранной области. Как сделать ссылку в HTML, вы уже знаете.

Все пока что хорошо. Но нам теперь нужно связать картинку с картой.
Для этого придумайте любое название для карты, например, « karta1 » и пропишите его в теге через атрибут name .

Теперь свяжем карту с картинкой. Для этого используем атрибут usemap .
Пример написания:
usemap=» #имя_карты «

В нашем случае это будет выглядеть следующим образом:

Теперь соберем все вместе и пропишем еще координаты к другому прямоугольнику №2 с такими данными (x1=153, y1=11, x2=219, y2=127).

Теперь смотрите на результат. Нажмите на прямоугольник №1 и на прямоугольник №2

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

Для начала нужно указать тип области. Для этого пропишем в атрибуте shape значение « circle ».

Теперь переходим к координатам.
Чтобы создать координаты для круглой области, нужно прописать данные к центру (xy) и указать длину радиуса (R).
Порядок записи координат для атрибута coords будет таким:

Для круга №1 возьмите такие координаты:

x=46, y=48; а длина радиуса — R=35

Теперь дадим карте название и привяжем карту к рисунку:

Теперь соберем все вместе и пропишем еще координаты к кругу №2 с такими данными x=158, y=75, R=53.

Теперь смотрите на результат. Нажмите на круг №1 и на круг №2:

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

Многоугольная область самая сложная область в навигационной карте.

Для начала нужно указать тип области. Для этого пропишите в атрибуте shape значение « poly »

Теперь переходим к координатам.

Порядок записи координат для атрибута coords будет таким:

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

То есть, для многоугольника №2 это выглядит вот так:

Теперь дадим карте название и привяжем карту к рисунку:

Теперь соберем все вместе и пропишем еще координаты к шестиугольнику №1 с такими данными: x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58.

Теперь смотрите на результат. Нажмите на многоугольник №1 и на многоугольник №2:

Возможность комбинирования

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

Дополнение с использованием TITLE

Для каждой области можно прописать подсказки, используя атрибут title.

Теперь смотрите на результат. Наведите курсор мышки на круг, а потом на прямоугольник:

Вот и все. С картой изображения в HTML (навигационная карта) мы разобрались.

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

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

Рассмотрим пример как выглядит карта изображений в html:

При наведении курсора мышкой на области зеленого прямоугольника видно, что она является ссылкой на » #green_link » (метка выбрана для примера, можно сделать ссылку на любую страницу в интернете). У красного квадрата на » #red_link «, а у синего круга соответственно на » #blue_link «.

Код этого примера:

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

1. Необходимо создать связку изображения и карты . В изображении нужно сослаться на карту с помощью атрибута usemap=»#primer1″ . А ниже нужно описать код карты.

При создании карты ссылок атрибут usemap является обязательным для тега img.

2. Описание карты состоит из обязательного атрибута name , с помощью которого будет осуществляться привязка к изображению.

Области могут перекрывать друг друга. В этом случае ссылка будет вести на тот объект, что описан последним.

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

1. Атрибут shape=»тип_объекта» — задает тип объекта. Может принимать следующие значения:

  • circle — круг;
  • rect — прямоугольник;
  • poly — многоугольник;

2. Атрибут coords=»значения_координат» — определяет геометрическое расположение объекта и его размеры.

Точкой отчета изображения является верхний левый угол. Т.е. если вы указали отступ 10 по высоте, то это означает 10 пикселей вниз.

В зависимости от типа объекта нужно задавать значения координат в разных форматах. Все значения указывается в пикселях (пометку px писать не нужно).

  • Для типа circle: coords = (x,y,r) , где x,y координаты центра круга, а r — радиус круга;
  • Для типа rect: coords = (x1,y1,x2,y2) , где x1,y1 координаты левой верхней точки прямоугольника, x2,y2 — координаты нижний правой точки прямоугольника;
  • Для типа poly: coords = (x1,y1,x2,y2. xn,yn) , последовательно указываются координаты x,y каждой точки многоугольника;
  • _blank — открывает страницу в новом окне
  • _self — загружает страницу в текущее окно
  • _parent — загружает страницу во фрейм-родитель
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера

5. Атрибут title=»подсказка» — выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »

6. Атрибут nohref — делает область неактивной. Используется при перекрытии объектов. Используется довольно редко, но иногда это может стать незаменимым решением. Например можно сделать маленький круг внутри большого круга неактивным.

Обязательно область nohref должна идти первой.

Использование карты ссылок на изображении имеет место лишь в узком круг задач. Например, при создании какой-то схемы или карты проезда. В других случаях применение карты при создании меню и других графических элементов выглядит необоснованной.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL