Поиск по этому блогу

среда, 18 апреля 2012 г.

Как изменить атрибут src картинки при наведении с помощью jQuery

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

2 комментария:

  1. Спасибо за код, очень пригодился, а не подскажешь, как установить время смены, чтоб изображения менялись плавно, а не моментально.

    ОтветитьУдалить
    Ответы
    1. Не за что! Как вариант можно использовать функцию .animate(); Пример: http://jsfiddle.net/BQg6C/1/ Второй параметр функции - время анимации в миллисекундах.

      Удалить