area в HTML


Содержание
Илон Маск рекомендует:  Селекторы атрибутов

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 стили по умолчанию

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

Тег 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 (тег ), но с областями-ссылками. Причем таких областей можно создать очень много практически любой формы.

Рассмотрим пример как выглядит карта изображений в 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 (навигационные карты). Урок №11

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

Для того, чтобы создать карту изображения вам пригодятся знания о том, как вставить картинку и ссылку в 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 (навигационная карта) мы разобрались.

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

Теория

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

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

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

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

Атрибуты

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

Тип тега

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

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

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

в HTML

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


Серверные карты-изображения строятся следующим образом: создается элемент ‘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 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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