Есть задача: необходимо изменить картинку при наведении на нее мышкой. Если формат имен картинок одинаковый, это удобно сделать через jQuery изменяя атрибут src="" после загрузки страницы.
У нас есть 2 формата картинки:
Picture.jpg - Картинка оригинал, которая изначально отображается на странице.
Picture_over.jpg - Картинка, которая отображается при наведении на оригинал мышкой.
Для того чтобы выполнить изменение атрибута src="" тега img используем функции jQuery .mouseover и .mouseout:
У нас есть 2 формата картинки:
Picture.jpg - Картинка оригинал, которая изначально отображается на странице.
Picture_over.jpg - Картинка, которая отображается при наведении на оригинал мышкой.
Для того чтобы выполнить изменение атрибута src="" тега img используем функции jQuery .mouseover и .mouseout:
$(function() {
$("img")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "_over.jpg";
$(this).attr("src", src);
})
.mouseout(function() {
var src = $(this).attr("src").replace("_over.jpg", ".jpg");
$(this).attr("src", src);
});
});
Спасибо за код, очень пригодился, а не подскажешь, как установить время смены, чтоб изображения менялись плавно, а не моментально.
ОтветитьУдалитьНе за что! Как вариант можно использовать функцию .animate(); Пример: http://jsfiddle.net/BQg6C/1/ Второй параметр функции - время анимации в миллисекундах.
Удалить