Задача: При нажатии мышкой на картинку плавно заменить ее на другую, используя jQuery.
P.s. Можно также посмотреть "Плавная смена картинок в нескольких местах".
В данном примере хочу просто показать один из способов плавной смены двух картинок между собой на jQuery.
Для этого берем две картинки 1.gif, 2.gif и файлик, в котором все это будет происходить show-img.html :).
Рассмотрим show-img.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>jQuery img</title>
<script language="JavaScript1.2" src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#img").click(function () {
var src = $("#img").attr("src");
var tmp = $("#tmp").val();
$("#im").fadeOut("slow", function () {
$("#img").attr("src", tmp);
});
$("#im").fadeIn("slow");
$("#tmp").val(src);
});
});
</script>
</head>
<body>
<p id="im">
<img border="0" src="1.gif" id="img">
<input type="hidden" id="tmp" value="2.gif" >
</p>
</body>
</html>
Первым делом подключаем библиотеку jQuery, строка 06.
При нажатии мышкой на картинку выполняется скрипт с 11 по 19 строку, где сначала в переменную src мы сохраняем имя текущей картинки, строка 12. Затем в переменную tmp сохраняем значение скрытого поля для дальнейшей подстановки в путь картинки, строка 13. После этого делаем прозрачным элемент абзаца с id = "im" функцией fadeOut, строка 14 и меняем атрибут src, то бишь путь картинки с id = "img" на значение, которое хранится в переменной tmp, строка 15. И снова меняем прозрачность элемента с id = "im" функцией fadeIn, строка 17. В строке 18 мы меняем значение скрытого поля на путь к предыдущей картинке. Вот и все, теперь при следующем нажатии все повторяется, и картинки заменяются.
(голосов 9, в среднем: 3.89 из 5)
Loading ...
#1 Лимон - Июнь 18th, 2009 at 22:50
все круто – а как сделать чтобы при наведении мыши фон менялся?
как событие прописать?
#2 nice - Июнь 19th, 2009 at 10:49
как вариант менять стиль фона при mouseover.
#3 - Август 24th, 2009 at 03:13
$(document).ready(function(){
$(«#img»).mouseover(function () {
var src = $(«#img»).attr(«src»);
var tmp = $(«#tmp»).val();
$(«#im»).fadeOut(«fast», function () {
$(«#img»).attr(«src», tmp);
});
$(«#im»).fadeIn(«fast»);
$(«#tmp»).val(src);
});
$(«#img»).mouseout(function () {
var src = $(«#img»).attr(«src»);
var tmp = $(«#tmp»).val();;
$(«#im»).fadeOut(«slow», function () {
$(«#img»).attr(«src», tmp);
});
$(«#im»).fadeIn(«slow»);
$(«#tmp»).val(src);
});
});
#4 mitka_san - Январь 22nd, 2010 at 15:18
а реально этот скрипт адаптировать так чтоб смена картинок происходила не по нажатию на картинку, а по нажатию на ссылки, которые соответствуют кааждая своей картинке??
#5 nice - Январь 22nd, 2010 at 16:14
конечно реально.
вообще для программиста нет ничего нереального ))
#6 Ксения - Март 11th, 2010 at 03:42
А как прописать,чтоб менялись не две картинки,а допустим 16,друг за дружкой?
Заранее спасибо за ответ.
#7 Александр - Апрель 12th, 2011 at 21:49
Крутая штука. вот только работает только с одним элементом. я хотел сделать что бы все картники на страничке могли меняться. а по факту меняется только первая. следующие позиции статичны(
#8 nice - Апрель 12th, 2011 at 22:29
Александр, можно сделать и с остальными, достаточно под каждую картинку добавить по hiddenу или объявить массив и в него запоминать предыдущую картинку…
#9 nice - Апрель 12th, 2011 at 22:32
Ксения, прощу прощение за задержку, почему то не заметил…
Для решения вашей задачи нужно сгенерить массив картинок (точнее путей к ним) и по клику перебирать индексы массива и заменять src картинки как в примере.
#10 fear51 - Май 7th, 2011 at 13:27
как можно реализовать в этом скрипте чтобы :
вот у нас 3 картинки, при выборе 1ой менялась она, при выборе 2ой, 1ая менялась в исходное положение а 2ая менялась
#11 Петр - Июль 6th, 2011 at 14:13
простите а как сделать чтобы картинка менялась не по щелчку а при наведении
#12 nice - Июль 8th, 2011 at 13:44
вместо $(«#img»).click(function () {
написать $(«#img»).mouseover(function () {
#13 Петр - Июль 11th, 2011 at 10:45
Спасибо мудрейший)
#14 Петр - Июль 13th, 2011 at 12:27
Уважаемый nice подскажите пожалуйста
как всетаки реализовать это с большим количеством картинок примером. Будьте добры очень нужно)
имею в виду чтобы добавит по соседству еще таких меняющихся картинок, у меня они в этом случае статичны. То о чем писал выше Александр
#15 - Июль 14th, 2011 at 18:35
«в переменную src мы сохраняем имя текущей картинки»
извиняюсь, конечно, но может, мы все-таки в переменную src сохраняем путь к картинке? ;)
спасибо за статью.
#16 nice - Июль 17th, 2011 at 16:52
Татьяна, вы абсолютно правы, я это и имел ввиду!
#17 nice - Июль 17th, 2011 at 17:11
Скрипт немного нужно переписать, а именно отвязать логику от id элементов которые должны быть всегда уникальными. Чуть позже выложу переписанный скрипт!
#18 Петр - Август 2nd, 2011 at 11:27
Жду с нетерпением )
#19 nice - Август 16th, 2011 at 21:21
Немного изменил скрипт, надеюсь кому-то будет полезен!
http://www.webnotes.com.ua/index.php/archives/829