Вторник, 17.10.2017, 16:28
Приветствую Вас Гость | rss
Меню сайта
Форма входа

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0


Тег <area>





Описание    

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

Синтаксис    

<map>
<area
href="URL" атрибут="параметр">
</map>


Атрибуты    

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

rect - прямоугольник
circle – окружность
poly – многоугольник

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

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

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

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

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

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

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

Пример    

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>
Тег <area> </title>
</head>
<html>
<body>
 <div
id="title"><img src="http://htmlbook.name/tegshtml/tag_area.png"width="300" height="350"
                alt="Навигация по сайту" usemap="#Navigation"></div>
  <p>
<map
name="Navigation">
  <area
shape="poly" coords="0,45,300,45,300,88,0,88" href="http://htmlbook.name/" alt="Главная страница">
  <area
shape="poly" coords="0,90,300,90,300,130,0,130" href="http://htmlbook.name/index/uchebnik_html/0-4" alt="Учебник HTML">
  <area
shape="poly" coords="0,132,300,132,300,174,0,174" href="http://htmlbook.name/index/uchebnik_css/0-5" alt="Учебник CSS">
  <area
shape="poly" coords="0,175,300,175,300,216,0,216" href="http://htmlbook.name/index/spravochnik_html/0-6" alt="Использование
    тегов"
>
  <area
shape="poly" coords="0,218,300,218,300,260,0,260" href="http://htmlbook.name/index/tegi_html/0-8" alt="Теги HTML">
  <area
shape="poly" coords="0,262,300,262,300,302,0,302" href="http://htmlbook.name/index/cveta_v_html/0-7" alt="Цвета в HTML">
  <area
shape="poly" coords="0,305,300,305,300,349,0,349" href="http://htmlbook.name/index/poleznye_programmy/0-9" alt="Полезные
     программы"
>
</p>
 </body>
</html>

Попробуйте сами »



Навигация по сайту



Для определения координат подойдёт практически любой графический редактор. Я использую Paint.NET. Ниже видно где можно увидеть координаты точки на изображении:

определение координат


Главная страницаУчебник HTMLУчебник CSSИспользование 

теговТеги HTMLЦвета в HTMLПолезные 

программы

Поиск
Календарь
«  Октябрь 2017  »
ПнВтСрЧтПтСбВс
      1
2345678
9101112131415
16171819202122
23242526272829
3031
Архив записей

rss
Яндекс.Метрика Каталог@Mail.ru - каталог ресурсов интернет