Приветствую. Продолжаем изучать HTML-теги, к которым мы приступили в первой части.

AREA

Описание:

Данный тег используется для определения активных областей изображения, которые могут являться ссылками. AREA используются в при создании графических карт. Кстати, тег работает в совокупности с тегом MAP, без которого невозможно определения активных областей.

Атрибуты:

target - способ открытия ссылки.
shape - форма активной области.
title - всплывающая подсказка, возникающая при наведении и удержании курсора на активной области.
coords - координаты активной области.
href - документ/URL, на который ссылается активная область.
nohref - атрибут, показывающий, что активная область никуда не ссылается.

Формы активной обасти:

Перед тем, как начать задавать координаты, необходимо определить форму активной области:

rect - прямоугольная область.
circle - круглая область.
poly - многоугольная область.

В зависимости от формы активной области задаются координаты.

Прямоугольная форма активной области:

Имеем следующее изображение:

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

Нам необходимо превратить его в вот такую карту-навигацию, назначив активные области:

Как я и говорил, AREA работает в совокупности с MAP, поэтому первоначально прописываем конструкцию MAP, и только после прописываем AREA. Каждый тег AREA определяет одну активную область, поэтому в нашем примере будет употреблено 4 тега, тк у нас 4 элемента навигации:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<map>
<area/>
<area/>
<area/>
<area/>
</map>
</body>
</html>

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

Отлично, теперь определяем форму. По изображению видим, что все 4 области имеют форму прямоугольника, поэтому используем атрибут shape c параметром rect:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<map>
<area shape="rect"/>
<area shape="rect"/>
<area shape="rect"/>
<area shape="rect"/>
</map>
</body>
</html>

Ну и теперь переходим к самой трудной части - определение координат:

Прямоугольная область задаются 4 координатами:

A1 - расстояние от левого края изображения до левой стороны активной области.
A2 - расстояние от верхнего края изображения до верхней стороны активной области.
A3 - расстояние от левого края изображения до правой стороны активной области.
A4 - расстонияе от верхнего края изображения до нижней стороны активной области.

Все координаты задаются в пикселях. Итак, приступим назначению координат для первого элемента навигации - "Главная":

Видим, что A1 будет равно 0 пикселям, тк левая сторона изображения сливается с левой стороной области "Главная". Теперь смотрим на A2. Высота изображения равна 100 пикселям, поэтому A2 будет около 70 пикселях. Теперь наблюдаем за A3. A3 будет являться длиной области "Главная", и эта длина равна 101 пикселю. A4 будет являться высотой самого изображения(100 пикселей). Получаем:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<map>
<area shape="rect" coords="0,70,101,100"/>
<area shape="rect"/>
<area shape="rect"/>
<area shape="rect"/>
</map>
</body>
</html>

Теперь определяем куда будет ссылать наша область, для этого используем знакомый нам атрибут href:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<map>
<area shape="rect" coords="0,70,101,100" href="http://selkinvitaly.ru"/>
<area shape="rect"/>
<area shape="rect"/>
<area shape="rect"/>
</map>
</body>
</html>

По желанию можно прописать атрибуты title и target:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<map>
<area shape="rect" coords="0,70,101,100" href="http://selkinvitaly.ru"/ target="_blank" title="Главная"/>
<area shape="rect"/>
<area shape="rect"/>
<area shape="rect"/>
</map>
</body>
</html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<map>
<area shape="rect" coords="0,70,101,100" href="http://selkinvitaly.ru/" target="_blank" title="Главная"/>
<area shape="rect" coords="104,70,198,100" href="http://selkinvitaly.ru/articles.html" target="_blank" title="Статьи"/>
<area shape="rect" coords="201,70,284,100" href="http://selkinvitaly.ru/lessons.html" target="_blank" title="Уроки"/>
<area shape="rect" coords="287,70,468,100" href="http://selkinvitaly.ru/community.html" target="_blank" title="Форма обратной связи"/>
</map>
</body>
</html>

Если сейчас мы вставим данный код в нашу страницу, то карту-навигацию мы не получим, т.к не связали нашу карту с изображением. Код же не может на подсознательном уровне догадаться какое изображение выступает в роле карты, поэтому, во-первых, мы даём имя своей карте через атрибут name:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<map name="menu">
<area shape="rect" coords="0,70,101,100" href="http://selkinvitaly.ru/" target="_blank" title="Главная"/>
<area shape="rect" coords="104,70,198,100" href="http://selkinvitaly.ru/articles.html" target="_blank" title="Статьи"/>
<area shape="rect" coords="201,70,284,100" href="http://selkinvitaly.ru/lessons.html" target="_blank" title="Уроки"/>
<area shape="rect" coords="287,70,468,100" href="http://selkinvitaly.ru/community.html" target="_blank" title="Форма обратной связи"/>
</map>
</body>
</html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<img src="images/menu.jpg" alt=""/>
<map name="menu">
<area shape="rect" coords="0,70,101,100" href="http://selkinvitaly.ru/" target="_blank" title="Главная"/>
<area shape="rect" coords="104,70,198,100" href="http://selkinvitaly.ru/articles.html" target="_blank" title="Статьи"/>
<area shape="rect" coords="201,70,284,100" href="http://selkinvitaly.ru/lessons.html" target="_blank" title="Уроки"/>
<area shape="rect" coords="287,70,468,100" href="http://selkinvitaly.ru/community.html" target="_blank" title="Форма обратной связи"/>
</map>
</body>
</html>

В атрибуте src указываем расположения нашего изображения.

Изображение подключили, но как нам сделать, чтобы данное изображение использовалось как карта? Через атрибут usemap, но перед название карты необходимо поставить символ решётки:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<img src="images/menu.jpg" usemap="#menu" alt=""/>
<map name="menu">
<area shape="rect" coords="0,70,101,100" href="http://selkinvitaly.ru/" target="_blank" title="Главная"/>
<area shape="rect" coords="104,70,198,100" href="http://selkinvitaly.ru/articles.html" target="_blank" title="Статьи"/>
<area shape="rect" coords="201,70,284,100" href="http://selkinvitaly.ru/lessons.html" target="_blank" title="Уроки"/>
<area shape="rect" coords="287,70,468,100" href="http://selkinvitaly.ru/community.html" target="_blank" title="Форма обратной связи"/>
</map>
</body>
</html>

Теперь наша карта-навигация готова!

Хотелось бы написать краткую инструкцию, по которой мы действовали:

Прописываем MAP и нужное кол-во тегов AREA.
Определяем координаты каждой области.
Прописываем ссылки (По желанию можно указать всплывающие подсказки и атрибут target).
Даём имя карте, используя атрибут name.
Подключаем изображение через тег IMG.
Соединяем карту с изображением, прописав имя карты в атрибуте usemap.

А мы тем временем переходим к следующей форме.

Круглая форма активной области:

Теперь будем делать вот такую карту:

Круглая форма в создании карт. Изучение тега AREA

Из изображения:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<map>
<area shape="circle"/>
<area shape="circle"/>
<area shape="circle"/>
</map>
</body>
</html>

Наблюдаем, что при круглых обрастях, в атрибуте shape используется параметр circle.

Круглая область задаётся 3 координатами:

A1 - расстояние от левого края изображения до центра круга.
A2 - расстояние от верхнего края изображения до центра круга.
R - радиус круга.

Задаём координаты для зелёного шара:

Центр круга удалён от левого края изображения, примерно, на 60 пикселей(A1), от верхнего края(A2) - на 51 пиксель(половина высоты изображения), ну и радиус шара(R) - 39 пикселей. Записываем:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<map>
<area shape="circle" coords="60,51,39"/>
<area shape="circle"/>
<area shape="circle"/>
</map>
</body>
</html>

По аналогии находим координаты остальных шаров:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<map>
<area shape="circle" coords="60,51,39"/>
<area shape="circle" coords="171,62,29"/>
<area shape="circle" coords="286,49,42"/>
</map>
</body>
</html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<map>
<area shape="circle" coords="60,51,39" title="Зелёный шар" nohref/>
<area shape="circle" coords="171,62,29" title="Фиолетовый шар" nohref/>
<area shape="circle" coords="286,49,42" title="Жёлтый шар" nohref/>
</map>
</body>
</html>

Видим, что nohref не имеет параметров. Наличие данного атрибута свидетельствует о том, что активная область никуда не ссылается. И ещё: если используете nohref, то не используйте href.

Продолжаем. Теперь подключаем изображение, прописав имя карты:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<map name="sphere">
<area shape="circle" coords="60,51,39" title="Зелёный шар" nohref/>
<area shape="circle" coords="171,62,29" title="Фиолетовый шар" nohref/>
<area shape="circle" coords="286,49,42" title="Жёлтый шар" nohref/>
</map>
<img src="images/circle.jpg" alt=""/>
</body>
</html>

Теперь связываем нашу карту с изображением, прописав usemap:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<map name="sphere">
<area shape="circle" coords="60,51,39" title="Зелёный шар" nohref/>
<area shape="circle" coords="171,62,29" title="Фиолетовый шар" nohref/>
<area shape="circle" coords="286,49,42" title="Жёлтый шар" nohref/>
</map>
<img src="images/circle.jpg" usemap="#sphere" alt=""/>
</body>
</html>

Готово!

Многоугольная форма активной области:

Будем превращать:

Многоугольная форма в создании карт. Изучение тега AREA

В:

Мы с Вами уже знакомы с начальными этапами, поэтому сразу подключаем изображение, и связываем его с картой(shape используем c атрибутом poly):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<map name="trio">
<area shape="poly"/>
</map>
<img src="images/poly.jpg" usemap="#trio" alt=""/>
</body>
</html>

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

Теперь переходим к определению координат:

Кол-во координат в многоугольной области в два раза больше кол-ва вершин. В нашем случае координат будет шесть. Координаты задаются последовательно для каждой вершины. Я рекомендую эту последовательность определять расстоянием от левого края изображения. В нашем примере ближе всех к левому краю находится вершина А, а потом B и С, поэтому сначала мы задаём координаты A, потом B и C.

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

Отлично, теперь нужно реализовать сказанное:

Описываем вершину А, тк они ближе к левому краю. Расстояние от левого края края до вершины А(A1) составляет 77 пикселей, а A2 - 98 пикселей. Такие же две координаты определяем и для двух других вершин. Получаем:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<map name="trio">
<area shape="poly" coords="77,98,151,31,173,130"/>
</map>
<img src="images/poly.jpg" usemap="#trio" alt=""/>
</body>
</html>

Превосходно, теперь остаётся дописать знакомые нам теги title и nohref:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег AREA</title>
</head>
<body>
<map name="trio">
<area shape="poly" coords="77,98,151,31,173,130" title="Треугольник" nohref/>
</map>
<img src="images/poly.jpg" usemap="#trio" alt=""/>
</body>
</html>

Проверяем и видим, что координаты определены верно.

Урок получился большим. Обязательно повторяйте и прописывайте каждое действие у себя в документе, тк практика способствует лучшему усвоению изученного. Для лучшего закрепления я прикладываю Вам следующее изображение: