1. <area cords=”Координаты”>
Замечание:
· Если область имеет форму прямоугольника (shape=rect), то в качестве значений атрибута cords приводится две пары координат (левого верхнего и правого нижнего угла прямоугольника на экране) в пикселях
Пример: cords=”0,0,99,49”
· Координаты отсчитываются от левого верхнего угла объекта (imagemap – иллюстрации)
· Если область имеет форму окружности (shape=circle), то в качестве значений этого атрибута приводится 3 числа, определяющие положение центра окружности и ее радиус в пикселях
Пример: cords=”50,50,25”
· Если область имеет форму прямоугольника (shape=poly), то список координат содержит по паре чисел для каждой вершины многоугольника в порядке построения.
Пример: cords=”0,0,99,49,49,49” - треугольник
Href задает ссылку на URL, к которому переходит веб – браузер как только пользователь выполняет щелчок мышью в области, определенной дескрипторами <area>
3. <area shape=default/circle/rect/poly>
Стандартом дописывается объявление 3-х различных форм: прямоугольника, многоугольника и окружности
Атрибуты shape=rect и shape= default задают прямоугольную область
shape=circle задает окружность
shape=poly задает многоугольник
Пример: определяющая часть для imagemap – иллюстрации в HTML – документе может выглядеть так:
<map name = “coordinates”>
<area shape=circle cords=”200,50,30” href=”chapter1.html”>
<area shape=poly cords=”0,0,99,49,49,49” href=”chapter2.html”>
</map>
Самостоятельно: изначально предполагаем, что нам дан рисунок компьютера; подготовлены файлы с описанием его монитора, процессора (chapter1.html, chapter2.html). Задача: создать титульную страницу и поместить на ней изображение компьютера; при этом щелчок на изображение монитора должен переводить на страницу с описанием монитора. На процессор – к странице с описанием процессора.
<body>
<img src=”graphic.gif” usemap=”#coordinates”>
</body>
<map name=”coordinates” >
<area shape=circle cords=”200,50,30” href=”chapter1.html”>
<area shape=poly cords=”0,0,99,49,49,49” href=”chapter2.html”>
</map>
|
.png)