Как правильно создать area в HTML и использовать их на примерах

HTML предоставляет нам множество возможностей для создания динамичных и интерактивных элементов на веб-странице. Один из таких элементов — area, который позволяет создавать кликабельные области на изображении. Каждая область может быть связана с определенным действием, таким как переход на другую страницу или вызов функции JavaScript.

Area является частью тега map и может быть использована только внутри него. В общем смысле, map определяет изображение, а area — область, на которую можно нажать. Когда пользователь щелкает на область, определенное действие выполняется в зависимости от атрибутов, указанных внутри тега area.

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

Создание area: основные принципы и синтаксис

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

Основной атрибут, который применяется с тегом area, — это shape. С помощью этого атрибута задается форма области, которая может быть прямоугольной (rect), круглой (circle) или многоугольной (poly).

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

Атрибут coords задает координаты области внутри изображения и зависит от значения атрибута shape. Например, для прямоугольной области используется формат координат x1,y1,x2,y2, где (x1,y1) — координаты верхнего левого угла, а (x2,y2) — координаты нижнего правого угла.

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

Пример создания прямоугольной области с использованием тега area:

<map name="image-map"><area shape="rect" coords="0,0,50,50" href="https://example.com"></map><img src="image.jpg" alt="Изображение" usemap="#image-map">

В этом примере получается прямоугольная область размером 50×50 пикселей, расположенная в левом верхнем углу изображения. При клике на эту область будет осуществляться переход по ссылке https://example.com.

Использование тега <area> для создания областей на изображении

HTML-элемент <area> используется для создания неактивных областей внутри элемента <map>, которые могут быть привязаны к определенным действиям или ссылкам.

Для использования тега <area> необходимо указать координаты области и тип формы. Координаты могут быть заданы либо атрибутом «shape» с точками или фигурами, либо атрибутами «coords», определяющими позицию и размеры в пикселях.

Пример использования тега <area> для создания областей на изображении:

<img src="image.jpg" alt="Изображение" usemap="#map"><map name="map"><area shape="circle" coords="100,100,50" href="page1.html" alt="Область 1"><area shape="rect" coords="200,200,400,300" href="page2.html" alt="Область 2"></map>

В данном примере создано изображение «image.jpg» с двумя областями. Первая область имеет форму круга с координатами (100,100,50) и перенаправляет пользователя на страницу «page1.html», а вторая область имеет форму прямоугольника с координатами (200,200,400,300) и перенаправляет пользователя на страницу «page2.html».

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

Для использования тега <area> необходимо учитывать, что элемент <map> должен быть привязан к изображению с помощью атрибута «usemap», который должен содержать ссылку на атрибут «name» у элемента <map>.

Использование тега <area> позволяет создавать интерактивные изображения, которые могут быть использованы для создания карты сайта, изображения с возможностью навигации по разделам, или других пользовательских интерфейсов.

Основные атрибуты <area> и их значения

• shape: определяет форму области и может принимать значения «default» (по умолчанию), «rect» (прямоугольник), «circle» (круг) или «poly» (многоугольник).
• coords: задает координаты области в зависимости от ее формы. Значения координат зависят от значения атрибута shape.
• href: указывает URL-адрес, на который будет перенаправлен пользователь при щелчке на области.
• target: определяет, где должен быть открыт URL-адрес. Значения могут быть «_blank» (в новом окне или вкладке), «_self» (в текущем окне) или «_parent» (в родительском фрейме, если есть).
• alt: определяет альтернативный текст, который будет отображаться, если изображение не может быть загружено или если пользователь использует программу чтения с экрана.

Примеры кода:

• <area shape="default" href="http://example.com" target="_blank" alt="Главная страница">

  Определение области по умолчанию со ссылкой на главную страницу, которая будет открыта в новой вкладке или окне. Альтернативный текст — «Главная страница».

• <area shape="rect" coords="0,0,100,100" href="http://example.com" target="_self" alt="Прямоугольная область">

  Определение прямоугольной области с координатами (0,0,100,100). При щелчке на эту область будет открыта ссылка в текущем окне. Альтернативный текст — «Прямоугольная область».

• <area shape="circle" coords="50,50,50" href="http://example.com" target="_self" alt="Круглая область">

  Определение круглой области с координатами (50,50,50). При щелчке на эту область будет открыта ссылка в текущем окне. Альтернативный текст — «Круглая область».

• <area shape="poly" coords="0,0,50,100,100,0" href="http://example.com" target="_self" alt="Многоугольная область">

  Определение многоугольной области с координатами (0,0,50,100,100,0). При щелчке на эту область будет открыта ссылка в текущем окне. Альтернативный текст — «Многоугольная область».

Если используется несколько областей внутри одного элемента <map>, то для каждой области необходимо создать отдельный элемент <area> со своими атрибутами.

Как добавить активные области на веб-страницу

1. Сначала необходимо создать контейнер для активных областей, используя тег <map>. Это можно сделать следующим образом:

   <img src="image.jpg" alt="Изображение" usemap="#map"><map name="map"><!-- здесь будут располагаться активные области --></map>

2. Затем нужно определить активные области с помощью тега <area>. Каждая активная область определяется своими координатами и ссылкой на другую страницу или действием. Пример создания активной области:

   <area shape="rect" coords="x1,y1,x2,y2" href="page.html">

   Где:

   • shape — форма активной области (например, «rect» для прямоугольника или «circle» для окружности).
   • coords — координаты активной области (x1, y1 — верхний левый угол, x2, y2 — нижний правый угол).
   • href — ссылка на другую страницу или действие при нажатии на активную область.
3. После определения всех активных областей нужно связать их с изображением, используя атрибут usemap в теге <img>. Пример:

   <img src="image.jpg" alt="Изображение" usemap="#map">

4. В итоге получится следующий код:

   <img src="image.jpg" alt="Изображение" usemap="#map"><map name="map"><area shape="rect" coords="x1,y1,x2,y2" href="page.html"><area shape="circle" coords="x,y,radius" href="action"></map>

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

Инструкции по добавлению тега <map> на веб-страницу

Тег <map> позволяет создавать кликабельные области на изображениях, которые могут служить ссылками. Чтобы добавить тег <map> на веб-страницу, следуйте этим инструкциям:

1. Определите области, которые будут кликабельными на вашем изображении. Область может быть прямоугольной, круглой, многоугольной или областью в форме множества или нескольких областей.
2. Дайте вашему изображению атрибут usemap и укажите значение атрибута как ссылку на вашу карту. Например, <img src="image.png" usemap="#map">.
3. Добавьте тег <map> после вашего изображения и задайте атрибут name для него, чтобы сопоставить его с атрибутом usemap вашего изображения. Например, <map name="map">.
4. Внутри тега <map> добавьте теги <area> для каждой кликабельной области на вашем изображении.
5. В каждом теге <area> определите атрибуты shape, coords и href. Атрибут shape определяет форму области (rect — прямоугольник, circle — круг, poly — многоугольник), а атрибут coords задает координаты области. Атрибут href определяет ссылку, на которую будет осуществлен переход при клике на область. Например,
   • <area shape="rect" coords="10,10,50,50" href="page.html">
   • <area shape="circle" coords="100,100,50" href="page.html">
   • <area shape="poly" coords="50,50,100,50,100,100" href="page.html">

После добавления тега <map> с кликабельными областями на вашей веб-странице, изображение станет интерактивным, и пользователи смогут нажимать на определенные области, чтобы перейти по ссылке, связанной с этой областью.

Создание активных областей с использованием <area> внутри <map>

Для создания активных областей на веб-странице мы можем использовать тег <map> в сочетании с тегом <area>. Тег <area> определяет активные области внутри изображения. Это позволяет нам определить различные области на изображении, на которые можно нажимать или проходить по ссылке в зависимости от настроек.

Для использования <area> внутри <map>, мы сначала создаем <map> с помощью тега <map>, а затем определяем области с помощью тега <area>. Тег <map> должен содержать атрибут name, который должен быть уникальным для каждого <map> на странице. Тег <area> содержит атрибуты shape, coords и href. Атрибут shape определяет форму активной области (например, прямоугольник, круг или полигон), атрибут coords задает координаты точек этой области на изображении, а атрибут href указывает адрес, на который будет перенаправлен пользователь при нажатии на область.

Приведем пример кода, иллюстрирующего создание активных областей:

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

Используя теги <map> и <area> в HTML, мы можем создавать сложные и интерактивные области на изображениях, которые активируются при нажатии и взаимодействии с пользователем. Это полезный инструмент для создания карт сайта, изображений с возможностью навигации или интерактивных рисунков.