Основы работы с HTML



Карты изображений, обрабатываемые браузером - часть 2


Пример выполнения данного HTML-кода

Для корректной работы следующего примера необходимо создать в рабочей папке файлы rect.html, circle.html, polygon.html. Например, файл rect.html:

<html> <body> Вы выбрали прямоугольник </body> </html>

Обратите внимание, что атрибут alt (заменяющий текст) может использоваться как для всего изображения, так и для каждой его области.

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

<html> <body> <img src="figure_2.png" width="297" height="210" border="0" usemap="#coordinates"> <map name="coordinates"> <area coords="84,173,224,109" href="rect.html" alt="Прямоугольник"> <area shape="circle" coords="130,110,40" href="circle.html" alt="Круг"> <area shape="poly" coords="105,138,217,138,161,42" href="polygon.html" alt="Полигон (треугольник)"> </map> </body> </html>

Пример выполнения данного HTML-кода

В следующем примере порядок описания координатных областей приведен в соответствие с изображением на экране.

<html> <body> <img src="figure_2.png" width="297" height="210" border="0" usemap="#coordinates"> <map name="coordinates"> <area shape="circle" coords="130,110,40" href="circle.html" alt="Круг"> <area shape="poly" coords="105,138,217,138,161,42" href="polygon.html" alt="Полигон (треугольник)"> <area coords="84,173,224,109" href="rect.html" alt="Прямоугольник"> </map> </body> </html>

Пример выполнения данного HTML-кода




Содержание  Назад  Вперед