Druzya.org
Возьмемся за руки, Друзья...
 
 
Наши Друзья

Александр Градский
Мемориальный сайт Дольфи. 
				  Светлой памяти детей,
				  погибших  1 июня 2001 года, 
				  а также всем жертвам теракта возле 
				 Тель-Авивского Дельфинариума посвящается...

 
liveinternet.ru: показано количество просмотров и посетителей

Библиотека :: Компьютеры и Программирование :: А.В. Фролов, Г.В. Фролов - Сценарии JavaScript в активных страницах Web
<<-[Весь Текст]
Страница: из 116
 <<-
 
шающих указанные задачи.
  Изменение внешнего вида графических ссылок
   В документе HTML, внешний вид которого показан на рис. 5.1, находятся две 
кнопки, созданные как растровые графические изображения. Они используются для 
активизации ссылок, соответствующих двум другим документам HTML.

Рис. 5.1. Кнопка с надписью АУРАМЕДИА изменила свой цвет
   Если расположить курсор над одной из этих кнопок, надпись на этой кнопке 
изменит свой цвет. Это достигается динамической заменой графического 
изображения кнопки при помощи сценария JavaScript.
   Обратите внимание на исходный текст документа HTML, показанный в листинге 5.
1. 
Листинг 5.1. Файл chapter5/grbutton/grbutton.html

  
  
  

Журнал Аурамедиа
Soft-каталог
Для создания ссылок мы воспользовались оператором . Этот оператор использован здесь совместно с оператором , поэтому ссылка отображается как графическое изображение. Для оператора ссылки мы определили обработчики событий onMouseOver и onMouseOut: onMouseOver="document.btn1.src='pic/aurap.gif'" onMouseOut="document.btn1.src='pic/aura.gif'" Когда курсор мыши оказывается над ссылкой (то есть над графическим изображением ссылки), управление получает обработчик события onMouseOver. Этот обработчик загружает изображение pic/aurap.gif, где слово АУРАМЕДИА написано красным цветом (для второй кнопки в аналогичной ситуации загружается изображение pic/softcatp.gif). После того как пользователь убирает курсор мыши с поверхности кнопки, в дело включается обработчик события onMouseOut. Он восстанавливает исходное изображение, указанное в параметре SRC оператора . Создание анимационных изображений В следующем примере мы покажем, как с помощью динамической смены растровых графических изображений в сценарии JavaScript можно получить эффект анимации. На рис. 5.2 мы показали документ HTML, в котором используется такая анимация. Рис. 5.2. Анимация с помощью сценария JavaScript В окне браузера последовательно отображаются кадры анимационного изображения (рис. 5.3), причем сначала в прямой, а затем - в обратной последовательности. Это выглядит так, как будто слово Noise периодически тонет в цветном шуме и затем проявляется вновь. Заметим, что похожий эффект мы уже получали совершенно другими средствами в аплете Java, исходный текст которого был опубликован в журнале “Мир ПК” №1 за 1998 год. Рис. 5.3. Изображения отдельных кадров анимационной последовательности Также мы обратим ваше внимание, что для достижения подобного эффекта при помощи многосекционного файла GIF размер этого файла было бы необходимо удвоить. Причина этого заключается в том, что вам пришлось бы включить в файл кадры вначале в прямой, а затем в обратной последовательности. Сценарий JavaScript позволяет более тонко управлять процессом отображения кадров, что можно использовать для достижения достаточно сложных визуальных эффектов относительно простыми средствами. Исходный текст документа HTML, в котором имеется сценарий, выполняющий анимацию, показан в листинге 5.2. Листинг 5.2. Файл chapter5/noise/noise.html Animation with JavaScript В теле документа с помощью оператора мы разместили первый кадр анимационной последовательности: С помощью параметра NAME мы задали имя Img. Это имя будет использовано сценарием JavaScript для ссылки на объект. Кроме того, в теле нашего документа находится вызов функции showNextImage. Данная функция предназначена для отображения очередного кадра анимационной последовательности. В области заголовка документа HTML находится определение функции

 
<<-[Весь Текст]
Страница: из 116
 <<-