Есть задача: необходимо изменить картинку при наведении на нее мышкой. Если формат имен картинок одинаковый, это удобно сделать через 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/ Второй параметр функции - время анимации в миллисекундах.
Удалить