Техника Web-дизайна для студента
Создание изображений-карт
Изображение-карта это изображение, имеющее чувствительные области, по каждой из которых можно осуществлять ссылку на другой документ. Например, на рисунке изображена группа музыкантов. Создав несколько чувствительных областей, каждая из которых включает лицо одного из музыкантов, можно осуществлять ссылки на документы, содержащие более подробную информацию о каждом из них. Чувствительные области могут иметь форму прямоугольника, окружности или многоугольника.
Для создания чувствительных областей предназначена группа инструментов, расположенная на панели инструментов программы ImageReady, включающая кнопки Image Мар (Изображение-картА) и IMage Map Select (Выделение чувствительной области) —
Группа инструментов Image Мар (Изображение-карта) включает инструменты:
О Rectangle Image Мар (Прямоугольная область);
О Circle Image Мар (Область в виде окружности);
О Polygon Image Мар (Область в виде многоугольника).
Инструмент Image Map Select (Выделение чувствительной области) предназначен для выделения, перемещения, изменения размеров и формы чувствительных областей. Изменение параметров выделенной чувствительной области осуществляется с помощью палитры Image Мар (Изображение-карта), которая может быть открыта командой Image Мар (Изображение-карта) меню Window (Окно). Для быстрого открытия данной палитры можно воспользоваться кнопкой Bring the Image Map Palette Forward (Поместить палитру Image Map на передний план) на панели параметров инструмента Image Map Select (Выделение чувствительной области).
Построение прямоугольных и круглых чувствительных областей осуществляется после выбора соответствующего инструмента путем растягивания рамки вокруг нужной области изображения при нажатой кнопке мыши.
Создание чувствительной многоугольной области осуществляется инструментом Polygon Image Мар (Многоугольная область). Первый щелчок мышью по изображению устанавливает начальную точку первой стороны многоугольника, каждый последующий щелчок завершает построение одной стороны и начинает построение следующей. Построение завершается после щелчка по начальной точке первой стороны многоугольной области.
Изображение с тремя чувствительными областями показано на рис. 3.49.
|
Рис. 3.49. Изображение, содержащее три чувствительные области различной формы |
После построения чувствительных областей можно приступить к заданию их параметров. Чувствительная область выделяется инструментом Image Map Select (Выделение чувствительной области), после чего в палитре Image Мар (Изображение-карта) задаются параметры выделенной области. Палитра Image Мар (Изображение-карта) с содержимым раздела Dimensions (Размеры) для круглой области показана на рис. 3.50.
Элементы Name, URL, Target, Alt палитры Image Map (Изображение-карта) аналогичны соответствующим элементам палитры Slice (Фрагмент). В разделе Dimensions (Размеры) для круглой области задаются координаты центра круга (X, Y) и его радиус (Radius), а для прямоугольной области — координаты левого верхнего угла (X, Y), ширина (W) и высота (Н) области.
|
Slice Table о Image Map (J) N ame : | ImageM ap_Ь 1 URL: I утки. htm ■* | Target: | _self Alt: I утки |
|
I 205 |
||
|
Radius! |
50 |
|
|
1 70 |
||
/А
Рис. 3.50. Палитра Image Map
В результате создания чувствительных областей в само изображение никакие изменения не вносятся. Все необходимые параметры записываются во фрагменте HTML-документа внутри меток <мар>...</мар>. С помощью параметра name метки <мар> карте присваивается имя, которое используется для ее связи с конкретным изображением. Одна и та же карта может быть связана с разными изображениями. Чтобы убедиться в этом сохраним изображение-карту, воспользовавшись командой Save Optimized As (Сохранить оптимизированное изображение как) меню File (Файл). В диалоговом окне Save Optimized As (Сохранить оптимизированное изображение как) в строке Format (Тип файла) выберем HTML and Images (*.html). Текст документа, созданного программой ImageReady, приведен в листинге 3.4.
Листинг 3.4. HTML-документ, содержащий изображение-карту Мар1, связанную с рисунком природа. gif
<html>
<head>
< t i 11е>изобр-карта</1 i tle>
</head>
<body>
<img src="images/npnpofla. gif" width="283" height="270" bor - der="Ы" alt="" usemap="#Mapl">
<map name="Mapl">
<area shape="poly" alt="ne6eflM" coords="0,159, 53,127,
144,109, 275,172, 244,223, 0,228" href="лебеди. htm" tar - get="_blank">
<area shape="rect" alt="yTKM" coords="0,0,64,82" href="yTKM. htm" target="_self">
<area shape="circle" alt="yTKM" coords="205,70,50" href="yTKM. htm" target="_self">
</map>
</body>
</html>
Программа поместила рисунок в отдельную папку images. Карте дано имя Mapl, которое с помощью параметра usemap метки <img> связывает карту с рисунком. В параметре usemap перед именем карты должен находиться символ #. Для задания каждой чувствительной области внутри меток <мар>...</мар> используется метка <area>. Параметрами метки <area> являются:
О shape — задает форму чувствительной области и может принимать значения "rect" — прямоугольник, "circle" — окружность, "poly" — многоугольник;
□ coords — задает координаты чувствительных областей. Координаты перечисляются через запятую в следующей последовательности: XI, Y1, Х2, Y2 — координаты левого верхнего и правого нижнего углов прямоугольника, X, Y, R — координаты центра и радиус окружности, XI, Y1, Х2, Y2, ХЗ, Y3 — координаты вершин многоугольника. Все координаты отсчитываются от левого верхнего угла изображения вправо (X) и вниз (Y);
О href— задает имя файла или URL-адрес, на который осуществляется ссылка (полностью аналогичен параметру href метки <а>);
О Назначение параметров alt и target должно быть понятно из описания одноименных элементов в палитре Slice (Фрагмент).
В приведенном примере три чувствительные области разной формы. По двум из них осуществляются ссылки на один и тот же документ утки. htm, по третьей — на документ лебеди. htm.
|
|
