Смена картинок при наведении курсора - JavaScript, Ajax

hosts · 16.07.2012, 00:04

Здравствуйте. Подскажите, как можно сделать так, чтобы картинки менялись при наведении курсора. Только не две картинки, а много. То есть навел на картинку курсор, она сменилась, потом сменилась на другую и так далее... и как только убрали курсор, должна появиться первоначальная картинка. нашел вот такой код:

Код HTML:

<a href="#"    onmouseover="document.myImage2.src='img2.gif'"    onmouseout="document.myImage2.src='img1.gif'"> <img src="img1.gif" name="myImage2" width=160 height=50 border=0></a>

но тут можно только с двумя картинками, а нужно, чтобы было неограниченное количество картинок

rlib · 16.07.2012, 04:03

Так, например. Хотя, наверно, не самое красивое решение..

Код:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>	
	$(document).ready(function() {
		var iid;	
		var imgSrc = ["1.jpg", "2.jpg", "3.jpg"];
		var curImg = 0;				
		
		$("#display").bind('mouseover', function() {			
			iid = setInterval(function() {				
				curImg < imgSrc.length-1 ? ++curImg : curImg = 0;				
				$("#display").attr("src", imgSrc[curImg]);								
			}, 1800);					
		});
		
		$("#display").bind('mouseout', function() { clearInterval(iid); curImg = 0; this.src=imgSrc[0]});				
	});
</script>
</head>
<body> 
	
<img width="400px" id="display" src="1.jpg"/><br/>
</body> 
</html>

hosts · 16.07.2012, 09:38

спасибо) код хорош, но 1 минус. прокручиваются слишком медленно. можно увеличить скорость ?

Naive · 16.07.2012, 09:57

Код:

}, 1800);

1800мс — задержка при смене.

hosts · 17.07.2012, 10:41

нашел вот такой код. но нужна ваша помощь. картинки меняются только если курсор убрать с картинки и опять навести. можно ли переделать его ?

Код HTML:

<img style="height: 200px; border: 1px solid red"
     src="http://www.kolobok.us/smiles/artists/big/Connie_something-smells.gif"
 lang="http://www.kolobok.us/smiles/artists/big/Viannen_loungelizard.gif|http://www.kolobok.us/smiles/artists/big/Connie_yo-yo.gif"
     onmouseover="with (this) {p = lang.split ('|'); lang = p [1] + '|' + src; src = p [0]}">

Naive · 17.07.2012, 11:53

Предыдущий то код чем не устроил?

hosts · 17.07.2012, 12:43

появились проблемы с интеграцией в dle. с ним не получится

Cronos20 · 17.07.2012, 13:04

Цитата:

Сообщение от hosts

появились проблемы с интеграцией в dle. с ним не получится

Да что вы говорите?? DLE перестал воспринимать JQuery ???)))))

hosts · 17.07.2012, 13:09

Цитата:

Сообщение от Cronos20

Да что вы говорите?? DLE перестал воспринимать JQuery ???)))))

не в этом дело. вместо ссылок на картинки у меня должны быть дополнительные поля, но они не работают. не работают именно те, которые я прописываю в js. и еще прокрутка работает только в одной новости, а остальные стоят с одной картинкой и не крутятся. мне же надо чтобы работали доп. поля и прокрутка работала во всех новостях. тот код который я выложил работает и с доп. полями и со всеми новостями, но там принцип смены картинки другой. вот и прошу помочь его подправить если получится

hosts · 17.07.2012, 13:11

вот вам ПРИМЕР хочу сделать такое же, но только на dle. как я понял такое осуществимо только с доп полями.
Посмотрите вот это видео http://www.youtube.com/watch?v=kBPZnnxR3i4 это платный dle шаблон от разработчика test-templates. я не знаю как он там это реализовал, но не думаю что это дополнительные поля

16.07.2012, 00:04	#1
hosts Регистрация: 16.06.2012 Сообщений: 6	Смена картинок при наведении курсора Здравствуйте. Подскажите, как можно сделать так, чтобы картинки менялись при наведении курсора. Только не две картинки, а много. То есть навел на картинку курсор, она сменилась, потом сменилась на другую и так далее... и как только убрали курсор, должна появиться первоначальная картинка. нашел вот такой код: Код HTML: <a href="#" onmouseover="document.myImage2.src='img2.gif'" onmouseout="document.myImage2.src='img1.gif'"> <img src="img1.gif" name="myImage2" width=160 height=50 border=0></a> но тут можно только с двумя картинками, а нужно, чтобы было неограниченное количество картинок

16.07.2012, 09:57	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Код: `}, 1800);` 1800мс — задержка при смене. Alar, верни репу!

17.07.2012, 10:41	#5
hosts Регистрация: 16.06.2012 Сообщений: 6	нашел вот такой код. но нужна ваша помощь. картинки меняются только если курсор убрать с картинки и опять навести. можно ли переделать его ? Код HTML: <img style="height: 200px; border: 1px solid red" src="http://www.kolobok.us/smiles/artists/big/Connie_something-smells.gif" lang="http://www.kolobok.us/smiles/artists/big/Viannen_loungelizard.gif\|http://www.kolobok.us/smiles/artists/big/Connie_yo-yo.gif" onmouseover="with (this) {p = lang.split ('\|'); lang = p [1] + '\|' + src; src = p [0]}">

17.07.2012, 11:53	#6
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Предыдущий то код чем не устроил? Alar, верни репу!

17.07.2012, 13:11	#10
hosts Регистрация: 16.06.2012 Сообщений: 6	вот вам ПРИМЕР хочу сделать такое же, но только на dle. как я понял такое осуществимо только с доп полями. Посмотрите вот это видео http://www.youtube.com/watch?v=kBPZnnxR3i4 это платный dle шаблон от разработчика test-templates. я не знаю как он там это реализовал, но не думаю что это дополнительные поля Последний раз редактировалось hosts; 17.07.2012 в 13:27.

16.07.2012, 09:38	#3
hosts Регистрация: 16.06.2012 Сообщений: 6	спасибо) код хорош, но 1 минус. прокручиваются слишком медленно. можно увеличить скорость ?

17.07.2012, 12:43	#7
hosts Регистрация: 16.06.2012 Сообщений: 6	появились проблемы с интеграцией в dle. с ним не получится

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Смена картинок при наведении	mutabor	HTML и CSS	9	04.01.2011 20:43
Подсказка при наведении курсора мыши	Syltan	JavaScript, Ajax	2	23.04.2010 15:31
TImage,стиль при наведении курсора	DimOn4Ik	Общие вопросы Delphi	3	29.10.2009 21:16
Смена картинки при наведении курсора	Шсу	HTML и CSS	1	26.10.2009 19:50
увеличение излбражения при наведении курсора	SKS	HTML и CSS	4	08.03.2009 13:39