Реклама и Статистика


SEO sprint - Всё для максимальной раскрутки!



Смена изображений (часть первая)

Смена изображений (часть первая)

В веб-дизайне часто возникает необходимость заменить одно изображение на другое. Суть смены изображений заключается в том, чтобы с помощью сценария изменить значение атрибута SRC тега <IMG>. Напомним, что атрибут SRC имеет в качестве значения строку, указвающую месторасположение графического файла. Если элемент <IMG> , задающий изображение, содержится в HTML-документе, то в объектной модели имеется объект этого элемента со свойством src. Значение этого свойства можно изменить в сценарии. При этом в окно браузера загружается соответствующий графический файл, если, разумеется, он будет найден. В следующем примере щелчок на изображении из файла pictl.gif заменяет его изображением из файла pict2.gif. Поскольку сценарий очень небольшой, он записан в строке, которая присваивается атрибуту onclick тега <IMG>.

<HTML>
<IMG ID = "myimg" SRC = 'pictl.gif' onclick = "document.all.myimg.src = 'pict2.gif'">
</HTML>

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

<IMG ID = "myimg" SRC = 'pictl.gif' onclick = "imgchange()">
<SCRIPT>
var flag=false // флаг (триггер)
function imgchange(){ // обработчик щелчка на изображении
if (flag) document.all.myimg.src = "pictl.gif"
else document.all.myimg.src = "pict2.gif"
flag=!flag // изменяем значение флага на противоположное
}
</SCRIPT>

Просмотров: 20521

  Коментарии (5)
 1 Написал(а) rahost, в 18:21 26.07.2010
круто, работает )))
 2 Написал(а) Алекс, в 21:47 09.11.2010
Не подскажете скрипт замена изображения через определенное время
 3 Написал(а) КэтриН, в 16:07 17.11.2011
А как сделать так, чтобы при щелчке на кнопку текст то исчезал, то появлялся вновь((( Через onclick?
 4 Написал(а) КэтриН, в 16:18 17.11.2011
ПлИзЗЗЗ...Помогите люди добрые(((( Оч надо((( :cry
 5 Написал(а) Нур, в 01:33 17.12.2012
Спаааааааасибо огромное!!!! Ты даже не представляешь как ты мне помог!!)

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Реклама