Урок 7. Работа с изображениями.

Теория Скрипт Результат Разбор скрипта Задание

Как видно из названия, на этом уроке мы попробуем вставить в нашу интерактивную страничку изображения и что-нибудь с ними делать

Теория

Для начала мы познакомимся с массивами (array).
Описывается массив следующим образом:

Имя Массива = new Array();

К примеру,
tv=new Array()
объявляет, что tv представляет собой массив. С пустыми (скобками) массив может быть какой угодно длины. Можно также указать длину массива, например,
tv=new Array(5) Массивы всегда начинаются с нуля.

Чтобы вставить картинку на страничку, мы должны завести следующую переменную

имя переменной = Image()

И присвоить ей полный путь к файлу с картинкой

имя переменной.scr= "полный путь к файлу с картинкой"

Нам осталось только создать рисунок в HTML документе

Я думаю вы знаете как ето делается, но на всякий случай подскажу:

<IMG SRC="полный путь к файлу с картинкой" NAME="имя картинки" BORDER=0>

Тэг IMG говорит о том что это картинка, параметр SCR от куда ее вставить в документ, NAME имя обекта, BORDER наличие или отсутствие рамки рисунка, 1 или 0 соответственно.

А теперь посмотрите на скрипт и попробуйте сами разобраться, как и что он делает.

Скрипт

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
   var num=1
   img1 = new Image ()
   img1.src = "ar_l.gif"
   img2 = new Image ()
   img2.src = "ar_r.gif"

function slideshow() {
   num=num+1
   if (num>2){
      num=1}
      document.animal.src=eval("img"+num+".src")
   }
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="ar_l.gif" NAME="animal" BORDER=0>

<FORM NAME="myform">

<INPUT TYPE="button" VALUE="Нажми сюда!!!!"
NAME="b1" onClick="slideshow()">

</CENTER>
</BODY>
</HTML>

Результат

Разбор Скрипта

Разобьем его на две части:

<SCRIPT LANGUAGE="JavaScript">
   var num=1
   img1 = new Image ()
   img1.src = "ar_l.gif"
   img2 = new Image ()
   img2.src = "ar_r.gif"

Вот кое-что новое! num=1 не находится внутри функции. Да и вообще ни одна команда не находится внутри функции. num — это переменная. Указывая ее в начале скрипта вне функции, мы делаем ее глобальной переменной, то есть доступной для любой функции.
img1 = new Image() объявляет новый объект image (рисунок). img1.src= источник объекта, файл, в котором хранится картинка. Это стандартная схема. img1 хранится в ar_l.gif ; img2 хранится в ar_r.gif.
(В скобках) содержится информация о ширине и высоте рисунка. Это не обязательно, но желательно
Рисунки тоже доступны для любой функции. Таким образом, программа загружает рисунки в память компьютера. Пользователь не хочет ждать, пока каждая картинка будет загружаться с сервера.

Теперь часть №2:

function slideshow() {
   num=num+1
   if (num>2){
      num=1}
      document.animal.src=eval("img"+num+".src")
}

Первоначальное значение num равно 1. Это было еще в первом фрагменте. Когда пользователь щелкает по кнопке, запускается функция slideshow.
slideshow() прибавляет к num единицу. Когда num доходит до 3, то возвращается к 1. document.animal.src меняется на img плюс значение num и плюс .src. Например, если num = 1, то document.animal.src становится img1.src.
Обратите внимание, что команда eval() преобразует img1.src в указание на источник изображения. Без нее это был бы простой набор букв.

Задание

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

Ответ вы можете найти здесь