курс полный

Карты изображений

Для задания конфигурации карты-изображения используется парный тег <map> … </map>. Он имеет единственный атрибут name, являющееся именем карты, которое указывается в атрибуте usemap тега рисунка, являющегося ее основой:

Внутри тега <map> задаются непосредственно области карты-изображения, которые задаются при помощи тега <area>. Тег <area> имеет следующие атрибуты: shape, coords, href, nonhref, target и alt. Допустимыми значениями атрибута shape являются: rect, circle, poly, default. По умолчанию устанавливается значение rect, задающий область в виде прямоугольника.

Значением атрибута coords являются координаты области, которые задаются в виде списка. Для прямоугольника (rect) задаются координаты левого верхнего и правого нижнего углов:

Для круга (circle) – координата центра и радиус:

Для многоугольника (poly) задаются координаты всех вершин, причем если координаты последней вершины не совпадают с первой, то браузер автоматически создает последнюю вершину, с координатами первой и область замыкается:

cords="355,75,400,99,450,130,363,295,356,313,348,348,181,291,189, 281,260,291,305,290,316,248,317,224,318,197" href="fromimagemap3.htm" alt="На Документ 3">

Назначение атрибутов href, target и alt такое же, как и в случае тега <a>.

Ниже приведен пример создания карты изображения:

Атрибут nonhref используется для того, чтобы указать, что область не является активной. Например, его можно использовать, чтобы сделать активной область в виде кольца.

13. CSS – КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ

Если HTML используется для логического форматирования документа, то для управления его отображением на экране монитора или выводом на принтер применяются каскадные таблицы стилей. В CSS принята коробочная модель форматирования (рис. 16).

Рис. 16. Коробочная модель форматирования (увеличить)

В качестве примера приведем форматирование двух абзацев текста при помощи стиля style1:

Стиль определяется в заголовке веб-страницы (тег <HEAD>). Форматирование тега выполняется при помощи атрибута class:

<p class="style1">Абзац 1</p>

Существует три способа задания стиля: в заголовочном файле при помощи тега <style>, как в предыдущем примере; в отдельном файле и внутри тега.

Если стили заданы в отдельном файле его необходимо подключить при помощи тега <link>:

Файл, содержащий стили, должен иметь расширение .css. Если необходимо задать стиль внутри тега, то он определяется при помощи атрибута style:

<p style="position:absolute;top:40;left:60;color:red">Абзац 3</p>

Механизм CSS позволяет переопределить теги HTML (как, впрочем, и любые другие теги), т. е. определить способ их отображения по умолчанию:

Для управления отображением гиперссылок используются так называемые псевдостили. Они позволяют определить вид непосещенной ссылки (a:link); ссылки, по которой пользователь уже совершал переход (a:visited), а так же вида ссылки, над которой находится курсор (a:visited) и активной ссылки (a:active):

a:link { font-family: Geneva, Arial, Helvetica, sans-serif; color: #CC0000; text-decoration: underline; background-color: #CCFFFF; }

a:hover { font-family: "Times New Roman", Times, serif; font-size: 22px; font-style: italic; font-weight: bold; color: #FFFF00; text-decoration: blink; }

a:visited { color: #660000; }

a:active { font-size: 18px; color: #000099; text-decoration: blink; }

14. JAVASCRIPT

Содержание