javascript - смена картинки по клику - Программирование

#1 POPEYE

Стебно таблетку оторвал... :-) | ptrd.narod.ru

Постоялец
4 848 сообщений

Отправлено 15 декабря 2010 - 11:41

2 картинки (файла) - надо, чтобы они менялись попеременно по нажатию

пробовал с помошью переменных и if else и комманды onclick с этой переменной, но дело в том, что не додумался как сделать чтобы состояние переменной запоминалось - выходит что каждый раз оно обнуляется и картинка меняется только в 1 сторону 1 раз...

I'm POPEYE The Sailor man

Наверх

#2 ParadoxL

Постоялец
5 023 сообщений

Откуда:Edinburg

Отправлено 15 декабря 2010 - 12:11

Простенький пример ... индекс активной картинки держишь в глобальной переменной.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<script>
		var urls = ['http://usanov.net/wp-content/uploads/2010/02/hello_world.png',
					'http://www.lushtshirts.co.uk/images/products/hello-world.jpg'];
		var index = -1;
		
		function changeImage() {
			index = index == urls.length-1?0:index+1;
			document.images['img'].src=urls[index]; 
		}
	</script>
</head>

<body onload="changeImage()">
   <img id="img" width="300" height="300" />
   <input type="button" onclick="changeImage()" value="Change image">
</body>
</html>

Victoria nulla est, Quam quae confessos animo quoque subjugat hostes ...
Верю в смерть после жизни, любовь после секса и в крем после бритья ...

Наверх

#3 shb

New life, much more options

Постоялец
5 253 сообщений

Откуда:Таллинн

Отправлено 15 декабря 2010 - 13:28

Придирка
~~index = index == urls.length-1?0:index+1;~~

Красивее написать index = (index + 1) % urls.length;

Мыслящий человек просто обязан время от времени поднимать себя за волосы © Тот самый Мюнгхаузен

Joga Bonito!

Наверх

#4 ParadoxL

Постоялец
5 023 сообщений

Откуда:Edinburg

Отправлено 15 декабря 2010 - 13:42

красивее использовать if

Victoria nulla est, Quam quae confessos animo quoque subjugat hostes ...
Верю в смерть после жизни, любовь после секса и в крем после бритья ...

Наверх

#5 shb

New life, much more options

Постоялец
5 253 сообщений

Откуда:Таллинн

Отправлено 15 декабря 2010 - 13:44

хм. ну ладно ) понятие о красоте разное

Мыслящий человек просто обязан время от времени поднимать себя за волосы © Тот самый Мюнгхаузен

Joga Bonito!

Наверх

#6 ParadoxL

Постоялец
5 023 сообщений

Откуда:Edinburg

Отправлено 15 декабря 2010 - 14:09

тогда уж

document.images['img'].src=urls[++index%urls.length]

Victoria nulla est, Quam quae confessos animo quoque subjugat hostes ...
Верю в смерть после жизни, любовь после секса и в крем после бритья ...

Наверх

#7 POPEYE

Стебно таблетку оторвал... :-) | ptrd.narod.ru

Постоялец
4 848 сообщений

Отправлено 16 декабря 2010 - 01:26

Спасибо - работает - теперь бы понять КАК оно работает )))

а вот нашел еще 2 и они не работают...

01	<html>
02	 <img SRC="Max-it1.png" onclick=imgchange(this,"Max-it1.png","img1.jpg")>
03	<script>
04	  var x=false
05	  function imgchange(obj,imgX,imgY) {
06	   if  (x){
07	   obj.src=imgX
08	   } else {
09	   obj.src=imgY
10	   }
11	  x=!x
12	 }
13	 </script>
14	 </html>

----------------------------------------------------

01	<script language="JavaScript">
02	var img1="/i/catalog/beds/galary/_203.jpg";//Рисунок номер 1
03	var img2="/i/catalog/beds/galary/_205.jpg";//Рисунок номер 2
04	new Image().src=img2;
05	function zamena(cl){
06	if(cl){
07	document.all.img.src=img2;
08	}else{
09	document.all.img.src=img1;
10	}
11	}
12	document.write("<img name='img' src='"+img1+"' onClick='zamena(true)' >");
13	</script>

П.С. вот только как бы onload другое место перенести :shuffle: