Изменение размера картинки

Пусть поставлена задача: по щелчку на картинку, она должна увеличиться. Можно сначала записать соответствующий оператор непосредственно в теге img.

<img src=”pic1.jpg” width=100 height=100

onclick=”this.width = parseInt(this.width) +50”>

Усложним задачу: пусть картинка растет только до определенного максимального размера, а потом начинает уменьшаться. При достижении минимального размера картинка снова должна расти. Таким образом, получается, что при достижении картинкой некоторых граничным размеров или даже выходе за эти размеры должно измениться направление изменения. Т.е. надо ввести переменную, обозначающую направление изменения, например, napr. Очевидно, эта переменная должна быть описана в теге script. Традиционно такая переменная имеет значение +1 или -1, а выражение изменения выглядит подобно следующему: x = x+napr*50. Последнее – переменная napr должна изменять своё значение на противоположное при выходе размеров картинки за граничные.

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

function ch_img(){

this.width = parseInt(this.width) +napr*50;

...

}

Выше показан не весь код функции, но приведенный оператор не работает. Попробуем разобраться, почему. Вставьте перед вызовом функции и в функции самым первым оператором команду «alert(this.outerHTML);». Результат работы этих операторов разный: первый выдаст описание всего тега img, на который щелкнули мышкой. А второй выдаст сообщение undefined, т.е. неопределенное выражение. Причина в том, что в выражении некорректно использовано слово this: так можно обращаться к тегу-объекту только из программы, расположенной внутри тега.

Необходимо использовать другой способ обращения к тегу-объекту. Можно попробовать работать с идентификаторами. Добавьте в теги img атрибуты id с разными значениями. В функции ch_img опишите параметр, например, с именем im, а при вызове функции укажите фактический параметр.

var napr=1; maxW=400; minW=100;

function ch_img (im) {

im.width = parseInt(im.width) +napr*50;

if ((parseInt(im.width)>=maxW) || (parseInt(im.width)<=minW)))

napr=-napr;

}

...

<img id=im1 src=”pic1.jpg” width=100 height=100

onclick=”ch_img(this)”>

<img id=im2 src=”pic1.jpg” width=100 height=100>

Кажется, программа работает. Применим один из стандартных методов тестирования: проверим работу при граничных условиях. Пощелкайте по первой картинке до тех пор, пока она не начнет уменьшаться. И после этого щелкните по второй картинке. Она уменьшилась, хотя её размер был минимально допустимый! Второй щелчок по ней приведет к увеличению, но третий – снова уменьшит! Несколько неожиданный результат.

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

Исправьте программный код, рекомендуется отдельными условиями проверять выход за минимальный размер и выход за максимальный размер. Кроме того, при выходе за границы не изменять направление на противоположное, а прямо указывать его (1 или -1).

Проверим, всё ли теперь. В связи с тем, что переменная napr в нашей программе одна, наблюдается интересный эффект: картинки изменяются только в одинаковом направлении. Пусть одна картинка достигнет максимального размера и начнет уменьшаться. Щелкните по второй, она тоже сначала уменьшится, затем программа изменит направление на «возрастание». Щелкните снова по первой картинке – она «забудет», что уменьшалась и станет увеличиваться. Не правильно.

Выход кажется очевидным: заводим вторую переменную, назовем их napr1 и napr2. Чтобы в функции стало ясно, с какой переменной надо работать, попробуем передать ее вторым параметром. Снова получим эффект колебания около граничного значения. Причина в том, что параметры в JavaScript передаются по значению. Измененные в функции переменные napr1 и napr2 возвращаются к прежнему значению.

Есть два способа справиться с этой проблемой оба – попытки устроить так, чтобы параметром передавалась некоторая ссылка. Первый способ: необходимо описать одномерный массив napr, а параметром в функцию передавать индекс в массиве. Второй способ заключается в том, что описывается класс, свойствами которого являются и картинка и направление её изменения, возможно, граничные значения. С массивом вам можно разобраться самостоятельно. Необходимо только знать, как описывается массив, и как выглядит операция индексации. С классами мы познакомимся несколько позже.

Массив в Jscript – объектный тип. Поэтому чтобы описать (создать экземпляр) массив, требуется вызвать конструктор Array. При создании массива можно задавать количество его элементов, но можно и не задавать, нужное количество автоматически появится, как только Вы используете операцию индексирования. При создании экземпляра массива можно сразу задать начальные значения его элементов.

Элементы массива могут быть разных типов. Каждому элементу может быть присвоено имя. Обратиться к элементу можно при помощи операции индексации, причем можно задать имя элемента или его числовой индекс (индексация начинается с 0).

ar = new Array()

ar1 = new Array(4)

ar2 = new Array(5, “ля”,true)

ar3[0] = "678"