в страницах HTML и DHTML

Ксожалению, HTML не позволяют добиться достаточно слож-

ных . без . i дополнительных - . . . Java,

элементов управления ActiveX и клиентских сценариев. Фактически, кроме статической графики. Вы можете использовать только анимационные изображения, построенные с применением многосекционных файлов GIF, и.

i- . изображения, нужные создания ссылок.

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

Растровое изображение как объект

Для того чтобы встроить растровое изображение в документ HTML, необходимо использовать тег <IMG>. Общий этого тега показан ниже:

<IMG -- . ч

.Здесь мы указали только три параметра. Полный параметров тега

<1ИС> с кратким их описанием Вы найдете в таблице 2-6. Таблица 2-6. Параметры тега <IMG>

Параметр.

NAME

ALIGN

Адрес URL фагша с растровым графическим

Имя объекта, соответствующего растровому графическому изображе-

ii.iKi для ссъшки на объект в кли-

не ii(

в тех случаях, когда браузер изображения или когда такая воз-изображения:

нию. Это имя может Г)Ы ентском

Текстовая которая

не может показыватъ можностъ отключена текста

LEFT - границе;

RIGHT - по границе;

ТОР - по верхней границе; ilDuLE - по центру изображения; BOTTOM по нижней границе; ТЕХТТОР - выравнивание по соких символов в строке;

- выравнивание середины текстовой строки относителъно изображения;

BASELINE - нижней рамки изображения относителъно

базовой линии текстовой строки:

выравнивание нижней границы изображения относителъно границы текущей строки

самъ1х вы-

62 Базы Интернете. Практическое

Таблица 2-6. Параметры тега <IMG> - - -

Параметр Описание

HEIGHT Высота изображения в пикселах

WIDTH Ширина изображения в пикселах

SORCEB Ширина рамки (в пикселах) вокруг изображения (используется толь-

ко браузером Netscape Navigator)

HSPACE Ширина (в пикселах) свободного пространства, отделяющего изобра-

жение от текста по горизонтали

Ширина (в пикселах) свободного . изобра-

жение от текста по вертикали

Адрес i . . так называемую карту

которая используется для сегментированной графики

ISMAP Этот параметр указывает, что данное изображение является сегменти-

рованным

Параметры тега <IHG> определяют адрес файла с изображением, выравнивание текста, расположенного возле . . и т. д. С помогцью параметров HEIGHT и WIDTH выполняется масштабирование графических изображений. Значение Этих параметров указано в процентах от ширины окна нрпсмпт! . .

Масштабирование позволяет графический файл весьма неболь-

шого размера: он : - площадь в окне браузера, но быстро

передается через Интернет. Вы, однако, не вправе масштабировать сегментированные графические и фоновые изображения.

Если в документе HTML размещено несколько растровых изображений, то Вы адресовать соответствующие объекты как элементы массива docu-

images. Например, первое адресуется следующим образом;

document. images[0]. Однако в некоторых случаях удобнее пользоваться именами изображений, определенными параметром NAME оператора <IMG>.

Объект-изображение имеет свойство src, соответствующее параметру SRC оператора <IMG>. Адресуясь к этому свойству. Вы можете не только определять текущий адрес URL изображения, но и новый. Этим мы и воспользу-

емся далее.

Динамическая замена растровых изображений

Одна из наиболее интересных возможностей, доступных при использовании клиентских сценариев, заключается в динамической замене графических изображений, указанных в параметре SRC оператора <1Ш:-,

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

Здесь мы указали неполный адрес однако, можно указывать и полный

адрес.

Что произойдет при выполнении этой строки сценария? Область, выделенная в окне браузера для растрового изображения titnl, бу-заполнена изображением Если до этого там было другое изоб-

оно будет заменено новым.

Какие возможности предоставляет iiiii;ijrH<;i,4i iH замена растровых тощт-жений?

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

растровых в клиентском сценарии Вы смо-

жете создавать . . изображения.

Рассмотрим примеры сценариев, иллюстрирующих эти возможности.

Изменение внешнего вида графических ссылок

в HTML, изображенном на рис. 2-23, две кнопки, создан-

ные как растровые графические . . Они используются для активиза-

ции ссылок, соответствующих двум другим - HTML.

Рис. 2-23. Кнопка с надписью чАУРАМсДИА- изменила свой цвет

Если установить курсор над одной из на соответствующей

кнопке изменит свой цвет. Это достигается динамической заменой графического изображения кнопки при помощи клиентского сценария.

Обратите внимание на исходный текст документа HTML, представленный в листинге 2-17.

Листинг 2-17хранится в файле ch02/grbutton/grbutton,htmt на прилагаемом к книге компакт-диске.

Для создания ссылок мы воспользовались н-пт <А>. Он применяется здесь совместно с тегом <IHG>, поэтому ссылка отображается как графическое изобра-

Для тега ссылки <А> мы определили обработчики событий cnioiiseOver и

Когда курсор мыши оказывается . ссылкой (то есть над графическим -ражением ссылки), управление обработчик события onMouseOver. Этот

обработчик загружает изображение где слово АУРАМЕДИА на-

писано черным . : (для второй кнопки в аналогичной ситуации загружается изображение

После того как пользователь отодвигает курсор мыши от кнопки, в дело включается обработчик события . Он исходное изоб-

ражение, указанное в параметре SRC тега