Поиск

Рисунки и карты

<IMG>

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

src="Ссылка на файл"

Ссылка на файл представляет собой URL. В некоторых случаях у пользователя может возникнуть желание скопировать в отдельную папку какуюнибудь Web страницу или набор страниц из Интернета. Это позволяет в дальнейшем исполь зовать страницы, не подключаясь к Сети. Скопировать HTMLфайлы легко: это сделает броузер. Сложнее с рисунками. Сначала их надо найти в папке кэша, ско пировать в требуемую папку, а затем откорректировать значения всех атрибутов src, указав для них новый путь.

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

alt="My photo" — для фотографии;
alt="SEND" — если кнопка имеет надпись в виде рисунка;
alt="www. АДРЕС, com" — если это гиперссылка;
alt="pict15. g i f " — удобно для разработчика страницы.

Высоту и ширину области, в которой демонстрируется рисунок, задают при помощи атрибутов height и width. В том случае, когда задается один из этих атри бутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданной. Второй размер устанавливается автоматически, в соответствующей пропорции. Таким образом, применение только одного из атри бутов изменяет оба размера рисунка. Если задать явным образом оба атрибута, то рисунок будет масштабироваться по двум осям в соответствии с заданным разме ром. Масштабирование, как правило, ухудшает качество изображения.

Рисунок можно снабдить и стандартными атрибутами: class, dir, id, lang, longdesc, style, title, атрибутами событий.

Элемент IMG позволяет использовать изображения, отдельные части которых свя заны со ссылками и позволяют выполнять переходы. Такие изображения называ ются картами (тар). В том случае, когда реакцию на щелчок на карте обрабатывает программа, расположенная на сервере, в элемент включается атрибут ismap. Иног да его записывают так:

ismap="ismap"

Однако задание значения атрибута совершенно не обязательно.

В том случае, когда карта обрабатывается броузером, используется атрибут usemap. Он определяет имя карты:

usemap="#Имя"

Это имя ставится в соответствие со значением соответствующих атрибутов эле ментов AREA и MAP (см. ниже), которые определяют конфигурацию карты. Интересно, что задание атрибутов usemap придает элементу IMG свойства, харак терные для элемента А, то есть возможность ос уществления перехода. Кроме того, мы сталкиваемся со случаем, когда необходимо обязательное совместное исполь зование сразу трех элементов: AREA, IMG и MAP.

<МАР> <AREA> </map>

Этот элемент необходим для общего определения карты. Внутри него определя ются области карты при помощи элементов AREA и задается имя карты при помо щи атрибута: пате="Имя" Для каждой области карты должен быть создан свой элемент AREA. Он не имеет конечного тега. Этот элемент должен включать атрибут, определяющий ссылку:

href :=" Адрес"

Атрибут для задания текста, заменяющего изображение карты, не является обяза тельным:

alt= "Текст подсказки"

Он необходим для работы текстовых броузеров, но может быть использован как комментарий.

Атрибуты, определяющие форму области на карте, являются обязательными. Существует три стандартных вида областей: круг (circle), прямоугольник (rect) и многоугольник произвольной формы (polygon).

Для круга необходимо задать координаты центра и радиус (г), выраженные в пик селах. Координаты центра отсчитываются от левого края (х) и верхнего края (у) рисунка (рис. 4.1). Шаблон для задания круговой области таков:

shape="circle" coords=x,y,r

Для определения области произвольной конфигурации задают координаты (х, у] каждого из углов многоугольника, который точно или приблизительно соответ ствует по форме этой области:

shape="poly" coords=x7, y1, x2,y2, х З , у З . . .

Пример многоугольника показан на рис. 4.1.
При определении прямоугольной области задают координаты верхнего левого i правого нижнего углов прямоугольника:

shape="rectM coords=xt, y1, x2,y2

При помощи атрибута nohref (который используется без значений) можно запретить переход по ссылке для определенной области карты.

На листинге 4.1 приведен пример страницы Map.htm, на которой размещены две карты. Карта, имеющая имя k a r t a l , содержит область в виде круга и область про извольной формы. Карта karta2 содержит область прямоугольной формы.

Листинг 4.1. Webстраница с картами

<HTML>
<HEAD>
<ТГП.Е>Указатель 1л/еЬстраниц<ЛШе>
</head>
<BODY bgcolor="#FFFFFF" text="#000000" link="#OOOOFF"
vlink="#FFOOOO" >
<СЕМТЕВ><Н2>Примеры xapT</h2></center>
<A NAME="verh"x/a>
<Р>

Изображения карт иллюстрируют способы задания координат
областей для переходов

<HR>
lt;Н2>Карта</H2>
<МАР name="karta1">
<AREA alt="Kpyr" shape="circle"
coords="119, 114, 83" href="http://www. piterpress. ru">
<AREA а]д:="Многоугольник" shape="poly"
coords="74, 242, 180, 250, 249, 239, 242, 278, 31 , 276"
href="Start.htm">
</map>
<MAP name="karta2">
<AREA а]Л="Переход к карте 2" shape="rect"
coords="27,31,191,101" href="«verh">
</map>
<IMG src="Map1.gif" usemap="#karta1" alt="KapTa 1">
<HR>
<P>

Ha этой странице представлены две карты, которые позволяют выполнять различные переходы. Для правильного функционирования страницы необходимо проверить все ссылки на файлы, заданные с помощью атрибутов <B>src</b> и <B>href</b>, <Р>Щелчок по зеленому кругу обеспечит переход к Webстранице издательства "Питер", Желтый многоугольник вернет вас на страницу Start.htm. Красный прямоугольник обеспечивает переход в начало этой страницы,

<HR>
<Н2>Карта 2</h2>
<IMG src="Map2.gif " usemap="#karta2" alt="Kapтa 2">
</body>
</html>

Из листинга видно, что описание областей карты и соответствующий элемент IMG могут размещаться в разных частях страницы. Переходы, выполняемые с помо щью карты, могут происходить как внутри страницы, так и к удаленному ресурсу.

Для обращения к карте можно использовать и элемент OBJECT, например:

<OBJECT data="№w.gif" type="image/gif" usemap="#/<artar> </object>

С изображениями карт удобно работать в стандартном для Windows 95 редакторе Paint. Для него изображение должно быть представлено в формате BMP. Этот редактор позволяет использовать сетку в режимах увеличения. Ее можно вклю чить или отключить при помощи комбинации клавиш Ctrl+G. После выбора ин струмента Выделение указатель мыши приобретает вид тонкого крестика. Таким образом, положение указателя можно легко установить с точностью до одного пиксела. В строке состояния редактора будут указаны координаты курсора отно сительно верхнего левого угла рисунка. Значения координат соответствуют тре буемым для атрибута coords величинам и идут в том же порядке (х, у).

Если первоначально изображение создано не в формате GIF, то его можно преоб разовать в этот формат, используя любой графический редактор, поддерживаю щий этот тип файлов. Например, MS Photo Editor, входящий в состав Microsoft Office, или популярный Adobe Photoshop. Достаточно открыть графический файл в редакторе и сохранить его (выполнить команду Сохранить как) в формате GIF, Можно также использовать форматы JPG и PNG.

Реальные карты, созданные с использованием самых разных графических па кетов, смотрятся очень привлекательно. Часто области не имеют четких границ, и неискушенному пользователю «мышечувствительная» карта может показаться последним достижением в области разработки программ или, по крайней мере, хитро придуманным трюком. На самом же деле возможность построения карт была заложена в HTML с самых ранних версий.

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

Другой популярной областью использования карт является домашняя страница организации. В этом случае необходимые команды и названия рубрик могут рас полагаться в произвольном порядке: так, как надо дизайнеру. В качестве примера на рис. 4.2 приведен эскиз подобной карты.