5 растровые изображения

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

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

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

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

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

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


<IMG SRC="Адрес_файла_изображения"
  NAME="Имя_изображения"
    . . .
  WIDTH="Ширина"
  HEIGHT="Высота">

Здесь мы указали только три параметра. Полный список параметров оператора <IMG> с кратким их описанием вы найдете ниже:

Параметр	Описание
SRC	Адрес URL файла с растровым графическим изображением
NAME	Имя объекта, соответствующего растровому графическому изображению. Это имя может быть использовано для ссылки на объект в сценариях JavaScript
ALT	Текстовая строка, которая отображается в тех случаях, когда браузер не может показывать графические изображения или когда такая возможность отключена
ALIGN	Выравнивание текста относительно графического изображения LEFT по левой границе; RIGHT по правой границе; TOP по верхней границе; MIDDLE по центру изображения; BOTTOM по нижней границе; TEXTTOP выравнивание по верхней границе относительно самых высоких символов в текстовой строке; ABSMIDDLE выравнивание середины текстовой строки относительно середины изображения; BASELINE выравнивание нижней рамки изображения относительно базовой линии текстовой строки; ABSBOTTOM выравнивание нижней границы изображения относительно нижней границы текущей строки
HEIGHT	Высота изображения в пикселах
WIDTH	Ширина изображения в пикселах
BORDER	Ширина рамки вокруг изображения в пикселах (используется только браузером Netscape Navigator)
HSPACE	Ширина свободного пространства в пикселах, отделяющее изображение от текста по горизонтали
VSPACE	Ширина свободного пространства в пикселах, отделяющее изображение от текста по вертикали
USEMAP	Адрес URL файла, содержащего так называемую карту изображения. Эта карта используется для сегментированной графики
ISMAP	Этот параметр указывает, что данное изображение является сегментированным

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

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

Применение сегментированной графики мы подробно рассмотрели в 29 томе “Библиотеки системного программиста.

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

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

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

Одна из наиболее интересных возможностей, доступных при использовании сценариев 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;

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

5 растровые изображения

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

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

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

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

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