Простой гайд по созданию area в HTML без использования JS

HTML предоставляет нам множество инструментов для создания интерактивных веб-страниц. Один из таких инструментов — это тег <area>. С помощью этого тега мы можем создавать области, на которые пользователь может нажимать или наводить курсор мыши.

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

Атрибуты, которые мы можем использовать с тегом <area>, включают следующие:

• shape: определяет форму области (rect — прямоугольник, circle — окружность, poly — многоугольник);
• coords: определяет координаты вершин области;
• href: определяет ссылку, куда переходит пользователь при нажатии на область;
• alt: определяет текст, который появляется, когда изображение не может быть загружено;
• target: определяет, как открывать ссылку (в текущем окне, в новом окне или во фрейме).

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

Как добавить интерактивное поле на веб-страницу с помощью тега area в HTML

Для создания интерактивного поля с помощью тега <area>, следуйте этим шагам:

1. Включите изображение на вашу веб-страницу с помощью тега <img> и установите для него атрибут usemap. Значение этого атрибута должно соответствовать идентификатору карты, которую вы создадите на следующем шаге. Например:

<img src="image.jpg" usemap="#myMap">

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

<map name="myMap">...</map>

1. Внутри тега <map> создайте области с помощью тега <area>. Каждая область должна иметь атрибуты shape (определяет форму области) и coords (определяет координаты области на изображении). Например:

<map name="myMap"><area shape="rect" coords="0,0,100,100" href="page1.html"><area shape="circle" coords="150,150,50" href="page2.html"></map>

1. Определите действия, которые будут выполняться при клике или наведении на каждую область. Для этого вы можете использовать атрибуты href (переход по ссылке) или onclick (выполнение JavaScript-кода). Например, при клике на первую область будет происходить переход на страницу «page1.html», а при клике на вторую область будет происходить переход на страницу «page2.html».

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

Шаг 1: Создание области внутри изображения

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

Ниже приведен пример использования тега <map> для создания области внутри изображения:


<img src="picture.jpg" usemap="#map" alt="Изображение">
<map name="map">
  <area shape="rect" coords="0,0,100,200" href="link.html">
</map>


В этом примере мы создаем область прямоугольной формы с координатами (0, 0, 100, 200), что означает прямоугольник, начинающийся в верхнем левом углу изображения (0,0) и заканчивающийся в правом нижнем углу (100,200). При щелчке внутри этой области будет выполнен переход по ссылке «link.html».

Шаг 2: Определение ссылки или действия для области

Существует несколько способов определить ссылку или действие для области:

• Ссылка на другую веб-страницу с помощью атрибута href. Например:

• <area shape="rect" coords="0,0,50,50" href="page2.html">

• Запуск скрипта или функции JavaScript с помощью атрибута onclick. Например:

• <area shape="circle" coords="50,50,20" onclick="myFunction()">

• Задание действия с помощью атрибута alt вместо атрибутов href или onclick. Например:

• <area shape="default" alt="Кликните, чтобы увидеть больше информации">

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