5 РАСТРОВЫЕ ИЗОБРАЖЕНИЯ

Сценарии JavaScript в активных страницах Web

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

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

Например, в следующей строке сценария JavaScript мы указываем, что изображение с именем btn1 должно иметь адрес URL pic/aurap.gif:


document.btn1.src="pic/aurap.gif"

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

Что произойдет при выполнении приведенной выше строки сценария?

Область, выделенная в окне браузера для растрового изображения btn1 будет заполнена изображением pic/aurap.gif. Если до этого там было другое изображение, оно будет заменено на новое.

Как можно воспользоваться динамической заменой растровых изображений?

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

Во-вторых, с помощью замены растровых изображений в сценарии JavaScript можно создавать анимационные изображения.

Рассмотрим примеры сценариев, решающих указанные задачи.

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

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

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

Если расположить курсор над одной из этих кнопок, надпись на этой кнопке изменит свой цвет. Это достигается динамической заменой графического изображения кнопки при помощи сценария JavaScript.

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

Листинг 5.1. Файл chapter5/grbutton/grbutton.html


<HTML>
  <BODY BGCOLOR="#B0FFD8">
  <FONT FACE="Arial, Helvetica" SIZE=1>
  <P>
  <A HREF="mainaur.htm" 
    onMouseOver="document.btn1.src='pic/aurap.gif'" 
    onMouseOut="document.btn1.src='pic/aura.gif'"><IMG 
    SRC="pic/aura.gif" NAME = "btn1" BORDER=0 ALT="Журнал Аурамедиа"</A>
  <BR>
  <A HREF="soft/default.htm" 
    onMouseOver="document.btn2.src='pic/softcatp.gif'" 
    onMouseOut="document.btn2.src='pic/softcat.gif'"><IMG 
    SRC="pic/softcat.gif" NAME = "btn2" BORDER=0 ALT="Soft-каталог"</A>
  </LEFT>
  </FONT>
  </BODY>
</HTML>

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

Для оператора ссылки <A> мы определили обработчики событий 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 оператора <IMG>.

Создание анимационных изображений

В следующем примере мы покажем, как с помощью динамической смены растровых графических изображений в сценарии 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


<HTML>
  <HEAD>
    <TITLE>Animation with JavaScript</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--

    var i=1;
    var bForward=true;

    function showNextImage()
    {
      if(bForward)
      {
        i++;
        if(i>17)
        {
          bForward=false;
        }
      }
      else
      {
        i--;
        if(i<2)
        {
          bForward=true;
        }
      }

      document.Img.src= "img0" + i + ".gif";
      setTimeout("showNextImage()", 100);
    }
    // -->
    </SCRIPT>
  </HEAD>
  <BODY BGCOLOR=white>
    <IMG SRC="img01.gif" NAME="Img">

    <SCRIPT LANGUAGE="JavaScript">
    <!--
      showNextImage();
    // -->
    </SCRIPT>
  </BODY>
</HTML>

В теле документа с помощью оператора <IMG> мы разместили первый кадр анимационной последовательности:


<IMG SRC="img01.gif" NAME="Img">

С помощью параметра NAME мы задали имя Img. Это имя будет использовано сценарием JavaScript для ссылки на объект.

Кроме того, в теле нашего документа находится вызов функции showNextImage. Данная функция предназначена для отображения очередного кадра анимационной последовательности.

В области заголовка документа HTML находится определение функции showNextImage и двух глобальных переменных:


var i=1;
var bForward=true;

Переменная i хранит номер текущего кадра, отображаемого в окне браузера. Этот номер вначале увеличивается функцией showNextImage от 1 до 16, а затем снова уменьшается до 1. Изменение номера происходит на 1 (в ту или в другую сторону) при каждом вызове функции showNextImage.

В переменной bForward хранится направление изменения номера кадра. Значение true соответствует прямому направлению, а значение false - обратному.

Когда функция showNextImage получает управление, она анализирует содержимое переменной bForward. Если в этой переменной находится значение true, функция showNextImage увеличивает значение переменной i, а затем сравнивает результат с числом 17. Когда отображение всех кадров в прямой последовательности завершено, в переменную bForward записывается false, после чего при следующем вызове функции showNextImage номер текущего кадра будет не увеличиваться, а уменьшаться.

Для отображения очередного кадра функция showNextImage изменяет значение свойства src изображения document.Img, как это показано ниже:


document.Img.src= "img0" + i + ".gif";

Имя файла, в котором хранится изображение кадра, конструируется из строки “img0”, номера кадра, и строки “.gif”.

Последнее, что делает функция showNextImage перед тем как возвратить управление, - вызывает функцию setTimeout:


setTimeout("showNextImage()", 100);

Напомним, что функция setTimeout устанавливает таймер. Задержка срабатывания таймера определяется вторым параметром и в нашем случае равна 100 миллисекундам.

Когда таймер сработает, будет запущена на выполнение строка сценария JavaScript, которая была передана функции setTimeout в качестве первого параметра. Мы вызываем после окончания задержки функцию showNextImage, и таким образом обеспечиваем вызов этой функции в бесконечном цикле.

Ожидание загрузки всех изображений

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

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

В листинге 5.3 мы привели исходный текст документа HTML со сценарием, который работает подобным образом.

Листинг 5.3. Файл chapter5/noise/noise2.html


<HTML>
  <HEAD>
    <TITLE>Animation with JavaScript</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var nNumberOfImages = 18;
    var i=1;
    var bForward=true;

    var imgArray = new Array(18);

    function loadAllImages(nNumberOfImages)
    {
      var i;
      for(i=0; i<nNumberOfImages; i++)
      {
        imgArray[i] = new Image();
        imgArray[i].src = "img0" + (i+1) + ".gif";
      }
    }

    function showNextImage()
    {
      if(bForward)
      {
        i++;
        if(i>17)
        {
          bForward=false;
        }
      }
      else
      {
        i--;
        if(i<2)
        {
          bForward=true;
        }
      }

      document.Img.src = imgArray[i-1].src;
      setTimeout("showNextImage()", 100);
    }
    // -->
    </SCRIPT>
  </HEAD>
  <BODY BGCOLOR=white>
    <IMG SRC="img01.gif" NAME="Img">

    <SCRIPT LANGUAGE="JavaScript">
    <!--
      loadAllImages(nNumberOfImages);
      showNextImage();
    // -->
    </SCRIPT>
  </BODY>
</HTML>

В теле документа HTML расположен сценарий, вызывающий последовательно функции loadAllImages и showNextImage:


loadAllImages(nNumberOfImages);
showNextImage();

Функции loadAllImages в качестве параметра передается общее количество изображений в анимационной последовательности. В нашем случае оно равно 18.

Задача функции loadAllImages заключается в заполнении массива объектов класса Image. Этот массив определен в области заголовка нашего документа HTML:


var imgArray = new Array(18);

Заполнение массива выполняется в цикле:


var i;
for(i=0; i<nNumberOfImages; i++)
{
  imgArray[i] = new Image();
  imgArray[i].src = "img0" + (i+1) + ".gif";
}

Для каждого элемента массива вначале с помощью ключевого слова new создается объект класса Image, а затем устанавливается значение свойства src этого объекта. Последняя операция и приводит к инициированию загрузки файла изображения, выполняемой асинхронно.

После того как массив заполнен, можно вызывать функцию showNextImage. Она идентична описанной в предыдущем примере, за исключением того что для установки свойства src изображения Img используются элементы заранее подготовленного массива imgArray:


document.Img.src = imgArray[i-1].src;