Тег area


Тег применяется внутри элемента . Необходим для определения областей изображения, при нажатии на которые будут активироваться ссылки на другие документы. Эти области называются картой изображений (image map). Адреса открываемых документов (URL ) также задаются этим тегом.

URL могут быть относительными и абсолютными. Относительные URL — адреса относительно текущей страницы или корня сайта. Работают только в пределах текущего сайта. Абсолютные URL — включают полный адрес документа и действуют везде, где указаны: на любом сайте, на локальном компьютере.

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

Содержание
Илон Маск рекомендует:  Что такое код ifxus_seek_slob

Атрибуты

  • alt — Обязательный атрибут. Альтернативный текст для браузеров, которые не могут отобразить изображение.
  • coords — Задает координаты области.
  • href — Задает путь к документу, который связан с конкретной областью.
  • nohref — Указывает, что область не имеет ссылки на документ.
  • shape — Задает тип формы области.
  • target — Задает имя окна или фрейма, в котором будет открыт документ.
  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab ).
  • title — выводит всплывающую подсказку при наведении курсора мыши на элемент.

Тип тега

Модель тега: располагается внутри элемента .

Может содержать: данный элемент является пустым/Empty.

Открывающий тег: необходим. Закрывающий тег: запрещен.

Тег area

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

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис
Атрибуты
accesskey горячая клавиша (+Alt) для элемента
alt альтернативный текст. Выводится в виде всплывающей подсказки. Также отображается, если картинки отключены
class определяет имя используемого класса
coords координаты фигуры, задающие ссылку
  • для shape=»rect» координаты диагонали x1,y1,x2,y2
  • для shape=»circle» центр и радиус x,y,R
  • для shape=»poly» пары значений вершин полигона x1,y1,x2,y2. xN,yN
disabled флаг. Делает элемент недоступным.
Отсутствует в спецификации HTML 4.01!
href задает адрес документа (объекта), на который следует перейти
id уникальный индетификатор
name уникальное имя элемента.
Отсутствует в спецификации HTML 4.01!
nohref задает неактивную область
onblur потеря фокуса элементом
onclick щелчек на элементе
ondblclick двойной щелчек на элементе
onfocus получение фокуса элементом
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
shape тип геометрической фигуры
  • rect – прямоугольник (по умолчанию);
  • circle – окружность;
  • poly – многоугольник.
style задает встроенную таблицу стилей
target имя окна или фрейма, где будет открыт документ, который указан в href. В качестве аргумента используется имя окна или фрейма.
Зарезервированные имена:
  • _blank — откроет документ в новом окне
  • _parent — откроет документ во фрейме-родителе. Если такого нет, откроет в текущем окне.
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фремов нет, откроет в текущем окне
  • _self — откроет в текущем окне (по умолчанию)
tabindex порядок обхода элементов с помощью Tab
title добавляет всплывающую подсказку
Пример
Рекомендации по использованию
  • должен быть закрыт слешем ()
  • должен располагается только внутри контейнера
  • атрибут alt обязателен

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

Внутри контейнера map можно комбинировать:

  • Один или более элементов area. Эти элементы не имеют содержимого, но определяют геометрические регионы карты изображений и гиперссылки, ассоциированные с каждым регионом.
  • Содержимое уровня блока. Это содержимое должно включать , которые специфицируют геометрические регионы карты и ссылки, ассоциированные с каждым регионом.

Если map имеет смешанное содержимое (и теги area, и блочные элементы), браузеры, согласно спецификации HTML 4.01, должны игнорировать элементы area.

Если регионы перекрываются, элемент, определяющий регион, который появился раньше в документе, имеет приоритет.

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

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

При использовании фигуры poly хорошей практикой считается указывать последние координаты, равные первым, для логического заверщения фигуры.

HTML Tag

Sharing is caring!

Code Example


Image map

An is a type of User Interface where clicking on different sections of an image lead to different results. To make an image map, you need three things:

  1. an image, in an element with the usemap attribute pointing to a valid on-page image map defined in a
  2. element, which contains
  3. one or more clickable elements.

The element

Learn About Image Maps

For complete details, see our tutorial on How to Make an Image Map, as well as the reference documentation for the element, and the related documentation pages listed below.

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

Карта ссылок изображений представляет собой обычное изображение в 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 должна идти первой.


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

HTML тег area

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

Тег всегда должен располагаться внутри тега map.

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

В HTML5 появились новые атрибуты, а некоторые атрибуты HTML 4.01 больше не поддерживаются.

В HTML тег — одиночный элемент без закрывающего тега. В XHTML тег должен закрываться должным образом, а именно — .

Атрибут Описание
alt Определяет альтернативный текст, если элемент не удается отобразить
coords Определяет координаты ссылки в карте изображений
download Определяет, что документ, на который указывает ссылка, будет загружаться
href Определяет URL, на которую ведет ссылка активной области изображения
hreflang Определяет язык документа, на который указывает ссылка активной области изображения
media Определяет устройство вывода, для которого оптимизирован документ, на который ведет ссылка области карты-изображения
nohref Определяет, что у ссылочного региона нет ассоциированной с ним ссылки
rel Определяет отношение с документом, на который ведет участок-ссылка карты-изображения
shape Определяет форму ссылки в карте изображений
target Определяет, где открывать документ, на который ведет участок-ссылка карты-изображения
type Определяет медиа-тип документа, на который указывает участок-ссылка карты-изображения

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

HTML пример

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

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

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

HTML Tag

An image map is an image with one or more areas that are hyperlinked. This means that the user can click on different areas within the image to be taken to a different URL.

Note that this tag must be nested within a tag or a tag.

Syntax

Examples

Geographical maps are a great candidate for applying an image map to. Using a graphic of a map, you can create clickable areas to indicate different geographical locations (eg, cities, provinces, or whole countries or continents).

The image below displays an image of two different countries. Each country is linked to a different URL. This is made possible by using an image map (i.e. in conjunction with the tag).

Basic Shapes

The above map example uses a shape of poly to display a polygon. A polygon is more complex than a simple shape such as a rectangle or circle. You can specify a polygon using either polygon or poly as a value of the shape attribute.

You can also use shape names to draw a rectangle ( rectangle or rect ) or a circle ( circle or circ ).

Below is an example of an image map consisting of a rectangle, circle, and a polygon.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the tag/element.

Attribute Description
alt Alternate text. This specifies text to be used in case the browser/user agent can’t render the image.
coords Specifies the coordinates of the clickable area. Coordinates are specified as follows:
  • rect: left, top, right, bottom
  • circle: center-x, center-y, radius
  • poly: x1, y1, x2, y2, .
shape Defines a shape for the clickable area. Possible values:
  • default
  • rect
  • circle
  • poly


href Specifies the URL of a page or the name of the anchor that the link goes to.
target Specifies the target frame to load the page into.
download Indicates that the link is to be used for downloading a resource (such as a file). The author can specify a default file name by providing a value. This attribute is optional.

[Default file name.] (optional)

rel Describes the relationship between the current document and the destination URI. Only to be used when the href attribute is present. Multiple values can be provided, separated by a space.
Value Description
alternate Gives alternate representations of the current document.
author Gives a link to the current document’s author.
bookmark Provides the permalink for the nearest ancestor section.
help Provides a link to context-sensitive help.
license Indicates that the main content of the current document is covered by the copyright license described by the referenced document.
next Indicates that the current document is a part of a series, and that the next document in the series is the referenced document.
nofollow Indicates that the current document’s original author or publisher does not endorse the referenced document. This attribute is often used to declare paid links to search engines such as Google, who, request that webmasters declare all paid links (eg, advertising) in this manner.
noreferrer Requires that the user agent not send an HTTP Referer (sic) header if the user follows the hyperlink.
prefetch Specifies that the target resource should be preemptively cached.
prev Indicates that the current document is a part of a series, and that the previous document in the series is the referenced document.
search Gives a link to a resource that can be used to search through the current document and its related pages.
tag Gives a tag (identified by the given address) that applies to the current document.
hreflang Language code of the destination URL. Only to be used when the href attribute is present.
type Specifies the MIME type of the linked resource. Only to be used when the href attribute is present.

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the tag , as well as with all other HTML tags.

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • inert
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the element, as well as any other HTML5 element.

  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

HTML5 introduced 2 new attributes for this tag: rel and hreflang .

To see more detail on the two versions see HTML5 Tag and HTML4 Tag. Also check out the links to the official specifications below.

Template

For more information on attributes for this tag, see HTML5 Tag and HTML4 Tag.

Tag Details

For more details about the tag, see HTML5 Tag and HTML4 Tag.

Specifications

Here are the official specifications for the element.

What’s the Difference?

W3C creates «snapshot» specifications that don’t change once defined. So the HTML5 specification won’t change once it becomes an official recommendation. WHATWG on the other hand, develops a «living standard» that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

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


coords
Указывает координаты навигационной области, возможные значения:

для прямоугольника — левый x, верхний y, правый x, нижний y
для окружности — центр x, центр y, радиус
для многоугольника — x1,y1,x2,y2,x3,y3. x7,y7

href
Указывает адрес документа, на который следует перейти.

nohref
Указывает, что заданная область область не содержит ссылку.

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

target
Открывает ссылку в окне или фрейме с заданным именем (имя фрейма указывается атрибутом name). Также может принимать зарезервированные значения:

_blank — открыть ссылку в новом окне
_self — открыть ссылку в текущем окне
_parent — открыть ссылку во фрейме-родителе.
_top — разрушает все фреймы и загружает страницу в полном окне.

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

accesskey . Переход к области с помощью комбинации клавиш.

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

coords . Координаты активной области.

href . Задает адрес документа, на который следует перейти.

hrefland . Указывает язык документа, на который ведет ссылка.

nohref . Область без ссылки на другой документ.

shape . Форма области.

tabindex . Задает последовательность перехода между элементами с помощью клавиши Tab.

target . Имя окна или фрейма, куда браузер будет загружать документ.

type . Устанавливает MIME-тип документа, на который ведёт ссылка.

Сайт с нуля

Создание сайта. Продвижение сайта. Заработок на сайте.

Тег area

Общераспространенное название: Тег area
Написание тега (синтаксис):
Закрывающий тег: Не нужно
Где применяется: Внутри тега
Пример: href =»Ссылка» >
Описание: Определяет элемент картинки как ссылку

Особенности

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

Тег area задаёт форму области, её размеры, устанавливает адрес документа, на который следует сделать ссылку. Он всегда располагается в теге map , который связывает координаты областей с изображением.

Можно применять такие атрибуты:

  • alt — альтернативный текст для области изображения.
  • coords — координаты активной области.
  • href — задаёт адрес документа, на который следует перейти.
  • hreflang — указывает язык документа, на который ведёт ссылка.
  • nohref — область без ссылки на другой документ.
  • shape — форма области.
  • target — имя окна или фрейма, куда браузер будет загружать документ.
  • type — устанавливает MIME-тип документа, на который ведёт ссылка.

Тег area — это область ссылки

Область-ссылка может перекрыть другую область, кликабельной будет та, которая в коде будет выше.

Атрибуты
accesskey — переход к ссылке с помощью горячих клавиш.
alt — всплывающая подсказка для области изображения.
coords — определяет положение активной области.
href — путь к документу, на который указывает ссылка.
hreflang — язык документа, на который указывает ссылка.
nohref — сообщает браузеру что данная область будет без ссылки.
shape -задает форму геометрической фигуре.
tabindex — задает порядок обхода элементов при помощи клавиши Tab.
target — определяет окно или фрейм, где будет происходить загрузка документа.
type — определяет тип элемента для отображения, на которую ведёт ссылка..
Для этого тега можно использовать глобальные атрибуты и события.

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