Перейти к содержимому

Фото
- - - - -

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


  • Вы не можете создать новую тему
  • Please log in to reply
6 ответов в этой теме

#1 POPEYE

POPEYE

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

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

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

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

пробовал с помошью переменных и if else и комманды onclick с этой переменной, но дело в том, что не додумался как сделать чтобы состояние переменной запоминалось - выходит что каждый раз оно обнуляется и картинка меняется только в 1 сторону 1 раз...
  • 0
I'm POPEYE The Sailor man

#2 ParadoxL

ParadoxL
  • Постоялец
  • 4 756 сообщений
  • Откуда: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>

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

#3 shb

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;
  • 0
Мыслящий человек просто обязан время от времени поднимать себя за волосы © Тот самый Мюнгхаузен

Joga Bonito!

#4 ParadoxL

ParadoxL
  • Постоялец
  • 4 756 сообщений
  • Откуда:Edinburg

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

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

#5 shb

shb

    New life, much more options

  • Постоялец
  • 5 253 сообщений
  • Откуда:Таллинн

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

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

Joga Bonito!

#6 ParadoxL

ParadoxL
  • Постоялец
  • 4 756 сообщений
  • Откуда:Edinburg

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

тогда уж
document.images['img'].src=urls[++index%urls.length]

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

#7 POPEYE

POPEYE

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

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

Отправлено 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:
  • 0
I'm POPEYE The Sailor man