<area>
Каждый элемент <area>
определяет активные области изображения, которые являются ссылками. Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Элемент <area>
задаёт форму области, её размеры, устанавливает адрес документа, на который следует сделать ссылку. <area>
всегда располагается в контейнере <map>
, который связывает координаты областей с изображением.
Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.
Синтаксис:
alt - Альтернативный текст для области изображения.
<area shape="rect" coords="185,10,390,90" href="http://weblecture.ru/node/13" alt="HTML">
coords - Устанавливает координаты активной области.
<area shape="rect" coords="10,20,180,100" href="http://weblecture.ru/node/3">
href - Задаёт адрес документа, на который следует перейти.
<area shape="circle" coords="321, 245, 100" href="http://weblecture.ru/node/13">
hreflang - Указывает язык документа, на который ведёт ссылка.
<area shape="rect" coords="10,20,180,100" href="http://weblecture.ru/node/16" hreflang="ru">
nohref - Область без ссылки на другой документ.
shape - Форма области.
<area shape="poly" coords="10,80,40,20,180,100" href="http://weblecture.ru/node/17">
target - Имя окна или фрейма, куда браузер будет загружать документ.
<area shape="rect" coords="10,20,180,100" href="http://weblecture.ru/node/18" target="_blank" alt="Откроется в новом окне">
type - Устанавливает MIME-тип документа, на который ведёт ссылка.
<area shape="poly" coords="10,80,40,20,180,100" href="http://grafika.me/demoscene" type="image/jpeg">
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>area</title> <style type="text/css"> </style> </head> <body> <div id="title"> <img src="area_1.jpg" width="400" height="300" alt="CSS and HTML" usemap="#Navigation"><br> <p><map name="Navigation"> <area shape="rect" coords="10,20,180,100" href="http://weblecture.ru/node/14"> <area shape="rect" coords="185,10,390,90" href="http://weblecture.ru/node/13"> </map></p> </body> </html>