Активные изображения или карты навигации

С помощью элемента IMGможно создавать «изображения-карты».Изображение-карта (imagemap) представляет собой графическое изображение, в котором определены «горячие точки», используемые в качестве гиперссылок. Изображения-карты позволяют по-новому компоновать интерактивныеweb-страницы. Например, можно создать изображение, представляющее собой блок из кнопок, каждая из которых предназначена для перехода по ссылке. Еще одним примером использования является их применение для создания карты сайта⁴.

Для того чтобы создать карту в языке HTMLиспользуется парный тег <MAP>. Он задает разбиение изображения на “горячие” области, т.е. области при нажатии на которые можно загрузить другойhtml-файл.

Атрибут у этого тега один - NAME, который должен быть обязательно. Для задания “горячих” областей используется непарный тегAREA, атрибуты которого представлены в таблице 5.

Таблица 5- Атрибуты тега MAP.

Атрибут	Назначение
HREF	Задает адрес страницы, которая будет загружаться этой областью.
SHAPE	Задает форму “горячей” области. Может принимать значения: circle окружность; rectпрямоугольник; polyмногоугольник произвольной формы.
COORDS	Задает координаты области. Все координаты отсчитываются от верхнего левого угла изображения. Они могут задаваться либо в пикселях, либо в процентах от размеров изображения. Кроме того, способы задания различны для разных форм области.
NOHREF	Позволяет запретить область, т.е. указать область, на которую нельзя нажимать.
ALT	Аналогично одноименному атрибуту у <img>, сообщает браузеру текст, который будет выводиться при наведении мыши на “горячую” область.

Следование областей может быть произвольным, но если какие-то части областей пересекаются, то на область пересечения будет реагировать та область, которая идет в списке первой.

Для того, чтобы назначить изображению карту необходимо использовать атрибут USEMAPи в нем указать значениеNAMEтега <MAP>. При указании имени важно учитывать регистр.

Следует помнить, что активные области обычно привязываются к реальным размерам изображения, а, следовательно, и использовать его надо в браузере в натуральную величину (т.е. не изменять его размер в % от экрана или в пикселях)⁵. Иначе же области сместятся. Пользоваться же изображением большого размера тоже не всегда удобно. Выход из этого положения можно предложить следующий: уменьшить размер изображения (с сохранением пропорций) например вPhotoshopтак, чтобы оно вписывалось целиком в рабочей области браузера и использовать его для создания навигационной карты.

Большинство современных Html-редакторов (в частностиDreamweaver) позволяют создавать карты изображений достаточно просто, без необходимости написанияHTML-кода вручную и вычисления координат областей.

Правда, изложенный способ создания активных изображений имеет существенный недостаток: при отключенном режиме отображения изображений использование такой карты лишено смысла (“горячих” областей просто не видно).

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

Фреймы

Язык HTML позволяет в рамках одной Web-страницы отобразить несколько доку­ментов. Для этого страница должна быть разбита на несколько областей - фреймов. Разбиение страницы описывается документом HTML особого рода, структура которого отличается от обычной. Тело документа заменяется описанием фреймов, задаваемым парным тегом <FRAMESET>. Элемент BODY в таком документе должен отсутствовать, а при наличии - игнорируется браузером.

Открывающий тег <FRAMESET> должен содержать обязательный атрибут COLS или ROWS, определяющий способ разбиения окна. В первом случае окно разби­вается вертикальными линиями, во втором – горизонтальными. Если заданы оба атрибута, создается сетка фреймов. Значение любого из этих атрибутов – это пере­численные через запятую размеры отдельных фреймов.

<FRAMESET COLS=100, 20%,*>

Значения могут быть заданы тремя способами: непосредственный размер в пикселях, размер в процентах от размера окна и произвольный. Именно так и показано в примере выше: окно делится на три вертикальные части, первая из которых составляет 100 пикселей в ширину, вторая 20% от размера окна, а последней выделяется все оставшееся пространство.

Между тегами <FRAMESET> и </FRAMESET> должно располагаться ровно столько элементов, сколько областей создано с помощью атрибутов COLS и ROWS. При этом могут использоваться дополнительные элементы FRAMESET, описывающие дальнейшее разбиение на подобласти еще меньшего размера, или непарные теги <FRAME>, определяющие способ использования области.

Тег <FRAME> должен содержать обязательный атрибут SRC, с помощью которого указывается, какой документ первоначально загружается в соответствующую область. Значение этого атрибута – абсолютный или относительный адрес URL нужного документа.

Среди остальных атрибутов выделяется атрибут NAME, позволяющий задать «имя» созданной области в виде последовательности латинских букв и цифр, использо­ванной как значение этого атрибута. Это имя должно быть уникальным.

<FRAME SRC="text.htm" NAME="left">

Это имя можно использовать, чтобы загружать новые документы в ранее созданную область. В документе, содержащем ссылку на файл, который должен изображаться в заданной области фрейма, используется имя именно этой необходимой области в атрибуте TARGET=”имя области кадра” тега <AHREF> </A> (для приведенного выше примера:TARGET=left).

Отсутствие имени в теге <AHREF> </A> заставит браузер отобразить документ в текущей области окна.

Для того чтобы обеспечить большую гибкость при работе с фреймами существует несколько зарезервированных имен. Так например, при ссылке с документов из кадровой структуры на новую кадровую структуру необходимо указать TARGET=”_top” (илиTARGET=”_parent”), чтобы браузер открыл новое окно просмотра. Иначе кадровая структура откроется в текущей области кадра, т.е. там где мы щелкнули мышкой. Этот недостаток позволит “вписать” друг в друга огромное количество кадровых структур, только кому и зачем это надо?

Использовать имя TARGET=”_top” можно чтобы изобразить любой простой документ вне кадровой структуры. Браузер откроет новое (целое) окно просмотра в этом же окне навигации, сохраняя возможность возвращаться к предыдущей кадровой структуре.

Использование имени TARGET=”_blank” укажет браузеру открыть новое пустое окно для навигации (т.е. откроет новый браузер для дальней шей работы с документом, вернутся назад, используя “стрелки” браузера нельзя, т.к. возвращаться некуда).

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

Однако фреймы очень помогают при создании хорошей навигации, т.к. не приходится много раз один и тот же код с кнопками и другими элементами. Например, предположим, что начальная страница Web-узла состоит из двух фрей­мов: слева располагается навигационная панель, а справа — текущая страница. Если правой области присвоено имя, используемое во всех ссылках, имеющихся в левой области, то щелчок на любой ссылке навигационной панели приведет к обновлению информации в соседней области, оставляя навигационную панель без изменений.

В таблице 6 представлены некоторые (из необязательных) атрибуты тегов <FRAME>, <FRAMESET>.

До сих пор существуют браузеры, которые не поддерживают фреймы, но к ним, как правило, относятся текстовые или совсем старые. Специально для таких существует парный тег <NOFRAMES>, внутри которого размещается содержимое страницы, не использующей фреймы.

Вложенные кадры не очень способствуют навигации. Но позволяют создать внутри одной объемлющей кадровой структуры две независимые подструктуры: можно поместить в верхней части экрана два столбца, а в нижней три. Для каждой структуры необходимо наличие парных тегов <FRAMESET>< /FRAMESET> (при их численном несоответствии кадры не будут отображаться вообще, хотя можете поэкспериментировать).

Таблица 6 - Атрибуты тегов, используемых при создании фреймов.

Атрибут	Тег	Назначение
FRAMEBORDER	FRAME-SET, FRAME	Устанавливает признак наличия окантовки (границы) фрейма (значения: Yes, No).
BORDERCOLOR		Задает цвет окантовки фрейма.
BORDER	FRAME-SET,	Задает ширину окантовки фрейма в пикселях
MARGINWIDTH, MARGINHEIGHT	FRAME	Задают горизонтальный и вертикальный размер границы фрейма в пикселях.
SCROLLING		Значение yes– скроллинг присутствует всегда;auto– появляется только тогда, когда он нужен;no– всегда отсутствует.
NORESIZE		Запрещает изменение размера фрейма. По умолчанию размер каждой области можно изменять с помощью мыши.

Нумерация кадров идет слева направо, а не сверху вниз. Создавать вложенные кадры надо также как и вложенные таблицы. Задав кадровую структуру и описав ее (тег <FRAME>), в необходимом кадре вставляем новую кадровую структуру и описываем ее, затем закрываем ее. Нельзя задать все кадровые структуры, а потом их все описывать (даже если в верном порядке). Например, чтобы задать кадровую структуру подобного типа

Необходимо описать ее следующим образом:

<HTML>

<HEAD><TITLE>Кадровые структуры</TITLE></HEAD>

<FRAMESET ROWS="25%,*">

<FRAMESET COLS="25%,*">

<FRAME SRC="1.htm">

<FRAME SRC="2.htm">

</FRAMESET>

<FRAMESET COLS="5%,30%,*">

<FRAME SRC="3.htm">

<FRAME SRC="4.htm">

<FRAME SRC="5.htm">

</FRAMESET>

</FRAMESET>

<NOFRAME> Кадры отображать не могу!!!!!</NOFRAME>

</HTML>