Модуль Frames

Серверный вариант карты ссылок

Клиентский вариант карты ссылок

Модули Client-side Image Map и Server-side Image Map

Послойный вывод таблицы

При форматировании таблицы и ее компонент один и тот же компонент может иметь разные значения одних и тех же стилей в разных элементах таблицы. Например, цвет фона в строке таблицы (элемент tr) имеет значение yellow, а цвет фона для ячейки этой строки (элемент td) может иметь значение blue.

Чтобы избежать конфликтов в таких ситуациях, таблица в Web-браузере выводится послойно, причем сначала выводится самый нижний слой, затем слой расположенный над ним и т.д.

В спецификации CSS определены следующие слои вывода таблицы (от самого нижнего слоя до самого верхнего):

1. Слой вывода самой таблицы (элемент table).

2. Слой вывода группы столбцов (элемент colgroup).

3. Слой вывода отдельного столбца (элемент col).

4. Слой вывода группы строк (элементы thead, tbody и tfoot).

5. Слой вывода отдельной строки (элемент tr).

6. Слой вывода отдельной ячейки (элементы th и td).

Поэтому в приведенном выше примере цвет ячейки будет синим, поскольку слой для элемента td расположен выше, чем слой для элемента tr.

Другой иллюстрацией послойного вывода является пример 4.3.93, в котором стили столбцов, заданные в элементах colgroup и col, не распространяются на стили заголовка таблицы, заданного в элементе tr с помощью класса header (пример 4.3.91).

Карты ссылок (Imagemap, Image Map, Area Map, Clickable Map, Sensitive Map) предоставляют пользователям возможность перехода на другие Web-страницы при щелчке мышью по отдельным фрагментам изображения. Эти фрагменты называются активными областями изображения. При использовании изображения как гиперссылки (когда элемент img находится внутри контейнера <a>…</a>) переход на другую Web-страницу выполняется при щелчке мышью в любом месте изображения, т.е. гиперссылка определена для всего изображения. Если для изображения определена карта ссылок, каждая активная область может быть связана с помощью определенной для нее гиперссылки со своей Web-страницей. Обычно активные области и ссылки, на которые они указывают, тем или иным способом выделяются и задаются на изображении.

Существуют два варианта реализации карты ссылок – клиентский вариант (client-side image map) и серверный вариант (server-side image map).

При использовании клиентского варианта (в модуле Client-side Image Map) описание конфигурации активных областей выполняется в документе HTML и переход по ссылке в выбранную активную область выполняет Web-браузер. Для этого используются атрибут usemap в элементе img, а также элементы map и area.

Значением атрибута usemap является ссылка на описание конфигурации карты, например

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

Для описания конфигурации областей карты ссылок используется контейнер <map>…</map>. Помимо общих атрибутов class, dir, id, lang, style и title в элементе map можно использовать атрибут name. Значение этого атрибута или атрибута id определяет метку, на которую задана ссылка в атрибуте usemap элемента img, например:

Внутри контейнера <map>…</map> располагаются описания активных областей карты. Каждая активная область описывается в одиночном элементе area. Активные области могут перекрываться. Если некоторая точка относится одновременно к нескольким активным областям, будет реализована та ссылка, описание которой располагается первым в списке областей.

Помимо общих атрибутов class, dir, id, lang, style и title в элементе area используются следующие атрибуты:

· shape – задает форму активной области;

· cords – задает координаты (x и y) точек, образующих активную область;

· href – задает гиперссылку (URL) для активной области;

· target – имя фрейма, в который будет помещена Web-страница, загружаемая по заданной а атрибуте href гиперссылке;

· nohref – активная область не имеет гиперссылки;

· alt – пояснительный текст для активной области.

Рассмотрим эти атрибуты подробнее.

Атрибут shape определяет форму активной области. Допустимыми для этого атрибута являются следующие значения:

· rect – активная область является прямоугольником со сторонами, параллельными сторонам экрана;

· circle – активная область является кругом;

· poly – активная область является многоугольником;

· default – все точки изображения являются активной областью.

Если атрибут shape не задан, активная область является прямоугольником.

Значением атрибута coords является список координат точек, разделенных запятыми. Координаты записываются в виде целых неотрицательных чисел. Начало координат располагается в верхнем левом углу изображения, которому соответствует значение 0,0. Первое число определяет координату x (по горизонтали), второе – координату y (по вертикали). Список координат зависит от типа области.

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

Для активной области типа circle (круг) задаются три числа (рис. 4.3.6б): координаты x и y центра круга и радиус r.

Для активной области типа poly (многоугольник) задаются координаты x и y вершин многоугольника в нужном порядке (рис. 4.3.6в). Последняя точка в списке координат не обязательно должна совпадать с первой. Если они не совпадают, то при интерпретации данных для этой формы области Web-браузер автоматически соединяет последнюю точку с первой.

Активная область типа default не требует задания координат. Значение default атрибута shape не воспринимается в Internet Explorer, поэтому если необходимо задать в качестве активной области все изображение, необходимо задать область типа rect, в котором координаты левого верхнего угла равны (0,0), а ширина и высота области совпадают с шириной и высотой изображения (эта область должна быть задана последней).

Рис. 3.4.6. Задание атрибута для различных типов активных областей:

а) область типа rect (прямоугольник); б) область типа circle (круг);

в) область типа poly (многоугольник)

Атрибуты href и nohref являются взаимоисключающими. Если не задан ни один из этих атрибутов, то считается, что для данной области не имеется ссылки. То же самое явно определяет атрибут nohref, не требующий значения. Атрибут href определяет адрес ссылки, который может записываться в абсолютной или относительной форме.

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

Курсор мыши над активными областями изображения принимает форму указателя (), а в неактивных областях – форму стрелки ().

Пример 4.3.95. Задание клиентской карты ссылок.

Опорное изображение для карты ссылок – ImageMapPicture.png находится в подпапке images текущей папки:

Для изображения необходимо задать четыре гиперссылки – на Web-страницы Page1.html, Page2.html, Page3.html и Page4.html. Первая гиперссылка создается для желто-коричневого прямоугольника, вторая – для синего круга. Третья гиперссылка задается для зеленой фигуры, четвертая – для пятиугольника, причем красный круг внутри этой фигуры не вызывает гиперссылки.

При ручном создании областей гиперссылок можно воспользоваться любым графическим редакторам, в котором есть средства вывода текущих координат курсора. Подводя курсор к ключевым точкам активных областей можно определить их координаты x и y, которые затем задаются в атрибуте coords элемента area. Более удобным и быстрым способом является использование средств построения карт ссылок в графических редакторах HTML, например во FrontPage или его новой версии Microsoft Office SharePoint Designer. Средства построения карт ссылок есть также в графическом редакторе Adobe ImageReady, который входит в состав Adobe Photoshop. Ниже приведен результат выделения активных областей (обозначены голубыми контурными линиями) в Adobe ImageReady:

и фрагмент Web-страницы, созданный этим редактором:

<img src="images/ImageMapPicture.png"

usemap="#ImageMapPicture_Map">

…

…

<area shape="rect" coords="26,35,119,89"

href="Page1.html" alt="Активная область 1"/>

<area shape="circle" coords="217,63,40"

href="Page2.html" alt="Активная область 2"/>

<area shape="rect" coords="23,180,94,244"

href="Page3.html"

alt="Фрагмент 1 активной области 3"/>

<area shape="circle" coords="95,211,32"

href="Page3.html"

alt="Фрагмент 2 активной области 3"/>

<area shape="circle" coords="220,206,17" nohref

alt="Неактивная область"/>

<area shape="poly"

coords="168,190,220,152,272,190,252,251,188,251"

href="Page4.html" alt="Активная область 4"/>

</map>

Элемент area, описывающий неактивную область должен идти перед элементом area, описывающим активную область 4. В противном случае гиперссылка будет реализовываться при щелчке мышью в любой точке пятиугольника, поскольку, в соответствии с правилом для точек, которые относятся одновременно к нескольким активным областям, будет реализована та ссылка, описание которой располагается первым в списке областей.

При использовании серверного варианта (в модуле Server-side Image Map) выделение и обработка активных областей выполняется на Web-сервере. Для указания того, что данное изображение является картой ссылок, в модуле Server-side Image Map определен атрибут ismap. В этом случае курсор мыши над изображением принимает форму указателя ().

Если в элементе img есть атрибут ismap, задаваемый по имени (без значения), то при щелчке по изображению выполняется переход к документу или программе на Web-сервере, которая указана в атрибуте href элемента img. При этом в параметрах вызова (после символа "?") на Web-сервер как строка передаются координаты x и y точки щелчка, разделенные запятой. Координаты точки на изображении определяются так же, как и для клиентского варианта.

Документ или программа, обрабатывающая серверную карту ссылок (например страницы PHP), может получить значения координат из переменной окружения. После обработки координат точки щелчка результат обработки обычно передается на Web-браузер пользователя в виде Web-страницы.

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

Пример 4.3.96. Задание серверной карты ссылок:

<img src="images/ImageMapPicture.png" ismap

href="http://www.commonsite.com/mysite/linkPage.php">

При щелчке мышью по этому изображению координаты точки щелчка будут переданы Web-серверу www.commonsite.com, который для обработки щелчка вызовет страницу linkPage.php в виртуальном каталоге mysite.

Использование фреймов, или кадров (frames), позволяют разбить окно просмотра Web-браузера на несколько прямоугольных областей, располагающихся рядом друг с другом. В каждую из этих областей (фреймов) можно загрузить отдельный документ HTML, просмотр которого осуществляется независимо от других. Между фреймами, как и между окнами, можно организовать взаимодействие, которое заключается в том, что выбор ссылки Шонин В.А.в одном из фреймов может привести к загрузке нужного документа в другой фрейм или окно Web-браузера.