Изменение источника изображения при перелистывании с помощью jQuery

У меня есть несколько изображений и их ролловерные изображения. Используя jQuery, я хочу показывать/скрывать изображение ролловера, когда происходит событие onmousemove/onmouseout. Имена всех моих изображений следуют одному и тому же шаблону, например, так:

Оригинальное изображение: Image.gif.

Перевернутое изображение: Imageover.gif

Я хочу вставить и удалить "over" часть источника изображения в событиях onmouseover и onmouseout соответственно.

Как я могу сделать это с помощью jQuery?

lowtechsun
Редактировал вопрос 18-го апреля 2016 в 10:12
Программирование
html jquery
12-го февраля 2009 в 7:28
41 просмотров
Комментарии к вопросу (4)
Решение

Установить на готовое:

$(function() {
    $("img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("over.gif", ".gif");
            $(this).attr("src", src);
        });
});

Для тех, кто использует url-источники изображений:

$(function() {
        $("img")
            .mouseover(function() {
               var src = $(this).attr("src");
               var regex = /_normal.svg/gi;
               src = this.src.replace(regex,'_rollover.svg');
               $(this).attr("src", src);

            })
            .mouseout(function() {
               var src = $(this).attr("src");
               var regex = /_rollover.svg/gi;
               src = this.src.replace(regex,'_normal.svg');
               $(this).attr("src", src);

            });
    });
jemmamariex3
Редактировал ответ 4-го января 2019 в 4:41
Комментарии (10)

Я знаю, что вы спрашиваете об использовании jQuery, но вы можете добиться того же эффекта в браузерах с выключенным JavaScript с помощью CSS:

#element {
    width: 100px; /* width of image */
    height: 200px; /* height of image */
    background-image: url(/path/to/image.jpg);
}

#element:hover {
    background-image: url(/path/to/other_image.jpg);
}

Более подробное описание есть здесь.

Еще лучше, однако, использовать спрайты: simple-css-image-rollover

ankit suthar
Редактировал ответ 8-го сентября 2017 в 11:24
Комментарии (6)

Если у вас есть более чем одно изображение, и вам нужно что-то родовое, что не'т зависеть от именования.

HTML-код

В JavaScript

$('img').bind('mouseenter mouseleave', function() {
    $(this).attr({
        src: $(this).attr('data-other-src') 
        , 'data-other-src': $(this).attr('src') 
    })
});
Комментарии (2)
    /* Teaser image swap function */
    $('img.swap').hover(function () {
        this.src = '/images/signup_big_hover.png';
    }, function () {
        this.src = '/images/signup_big.png';
    });
Комментарии (4)

Универсальное решение, которое не'т ограничивает вас, чтобы "этот образ" и "изображение", которая только может быть, чтобы добавить 'onmouseover модели' и 'onmouseout' теги в HTML-коде.

HTML-код

В JavaScript

function swap(newImg){
  this.src = newImg;
}

В зависимости от настроек, может, что-то вроде этого будет работать лучше (и требует меньше кода модификации).

HTML-код

На JavaScript / JQuery с

// Declare Arrays
  imgList = new Array();
  imgList["ref1"] = new Array();
  imgList["ref2"] = new Array();
  imgList["ref3"] = new Array();

//Set values for each mouse state
  imgList["ref1"]["out"] = "img1.jpg";
  imgList["ref1"]["over"] = "img2.jpg";
  imgList["ref2"]["out"] = "img3.jpg";
  imgList["ref2"]["over"] = "img4.jpg";
  imgList["ref3"]["out"] = "img5.jpg";
  imgList["ref3"]["over"] = "img6.jpg";

//Add the swapping functions
  $("img").mouseover(function(){
    $(this).attr("src", imgList[ $(this).attr("id") ]["over"]);
  }

  $("img").mouseout(function(){
    $(this).attr("src", imgList[ $(this).attr("id") ]["out"]);
  }
DACrosby
Редактировал ответ 11-го сентября 2013 в 7:56
Комментарии (0)
$('img.over').each(function(){
    var t=$(this);
    var src1= t.attr('src'); // initial src
    var newSrc = src1.substring(0, src1.lastIndexOf('.'));; // let's get file name without extension
    t.hover(function(){
        $(this).attr('src', newSrc+ '-over.' + /[^.]+$/.exec(src1)); //last part is for extension   
    }, function(){
        $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-over' from the name
    });
});

Вы можете изменить класс изображений из первой строки. Если вам нужно больше классов изображений (или другой путь), вы можете использовать

$('img.over, #container img, img.anotherOver').each(function(){

и так далее.

Должно работать, я не проверял :)

Комментарии (3)

Я надеялся на üКОБ один лайнер как:

$("img.screenshot").attr("src", $(this).replace("foo", "bar"));
Комментарии (0)

Если решение, которое вы ищете для анимированной кнопки, то лучшее, что вы можете сделать, чтобы улучшить производительность-это сочетание спрайта и CSS. Спрайт-это огромный образ, который содержит все изображения с вашего сайта (Заголовок, логотип, кнопки, и все украшения, которые у вас есть). Каждое изображение использует HTTP-запрос, и чем больше запросов тем больше времени потребуется для загрузки.

.buttonClass {
    width: 25px;
    height: 25px;
    background: url(Sprite.gif) -40px -500px;
}
.buttonClass:hover {
    width: 25px;
    height: 25px;
    background: url(Sprite.gif) -40px -525px;
}

Координаты 0px 0px будет слева вверху от ваших спрайтов.

Но если вы разрабатываете какой-фотоальбом с помощью AJAX или что-то подобное, то JavaScript (или любой базы) является лучшим.

Получайте удовольствие!

kevinji
Редактировал ответ 29-го июля 2013 в 7:20
Комментарии (0)
 
$('img').mouseover(function(){
  var newSrc = $(this).attr("src").replace("image.gif", "imageover.gif");
  $(this).attr("src", newSrc); 
});
$('img').mouseout(function(){
  var newSrc = $(this).attr("src").replace("imageover.gif", "image.gif");
  $(this).attr("src", newSrc); 
});
Комментарии (0)

Пока ищу решение некоторое время назад, я нашел похожий скрипт ниже, который после некоторой настройки Я работает для меня.

Он обрабатывает два изображения, что почти всегда по умолчанию, чтобы "выкл" и, когда указатель мыши находится за пределами изображения (image-example_off.jpg), а иногда "на глаз", где за раз навести курсор мыши на кнопку, требуется альтернативное изображение (image-example_on.jpg) отображается.

<script type="text/javascript">        
    $(document).ready(function() {        
        $("img", this).hover(swapImageIn, swapImageOut);

        function swapImageIn(e) {
            this.src = this.src.replace("_off", "_on");
        }
        function swapImageOut (e) {
            this.src = this.src.replace("_on", "_off");
        }
    });
</script>
Peter Mortensen
Редактировал ответ 29-го июля 2013 в 9:30
Комментарии (1)
 



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
JQuery
<script src="jquery.js" type="text/javascript"> </script>

    #box{
        width: 68px;
        height: 27px;
        background: url(images/home1.gif);
        cursor: pointer;
    }


<script type="text/javascript">

$(function(){

    $('#box').hover( function(){
        $('#box').css('background', 'url(images/home2.gif)');

    });
    $('#box').mouseout( function(){
        $('#box').css('background', 'url(images/home1.gif)');

    });

});
</script>



<div id="box" onclick="location.href='index.php';"></div>
Комментарии (0)

Я'ве сделали что-то вроде следующего кода :)

Это работает только, когда у вас есть второй файл с _hover, например, facebook.ПНГ " и " facebook_hover.ПНГ

$('#social').find('a').hover(function() {
    var target = $(this).find('img').attr('src');
    //console.log(target);
    var newTarg = target.replace('.png', '_hover.png');
    $(this).find('img').attr("src", newTarg);
}, function() {
    var target = $(this).find('img').attr('src');
    var newTarg = target.replace('_hover.png', '.png');
    $(this).find('img').attr("src", newTarg);
});
Peter Mortensen
Редактировал ответ 29-го июля 2013 в 9:28
Комментарии (0)
 


img = {

 init: function() {
  $('img').on('mouseover', img.swap);
  $('img').on('mouseover', img.swap);
 }, 

 swap: function() {
  var tmp = $(this).data('swap');
  $(this).attr('data-swap', $(this).attr('src'));
  $(this).attr('str', tmp);
 }
}

img.init();
Комментарии (0)

Адаптированный от Ричарда Айотт's код - Чтобы достичь img В ул список/ли (нашли через класс-оболочку див здесь), что-то вроде этого: 

$('div.navlist li').bind('mouseenter mouseleave', function() {    
    $(this).find('img').attr({ src: $(this).find('img').attr('data-alt-src'), 
    'data-alt-src':$(this).find('img').attr('src') }
);
Комментарии (0)