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


443

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

Исходное изображение: Image.gif

Rollover Image: Imageover.gif

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

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


Я написал небольшой практический совет с примерами для начинающих: « Изменить изображение с помощью JavaScript (или jQuery)» . Есть также пример без использования jQuery.
готический


10
Как раз то, что я ищу. Спасибо за размещение вопроса!
Самуэль Меддоус

У меня такая проблема ( Мой вопрос ). Ответ на этот вопрос отличный, но в IE9 каждый раз, когда вы нажимаете кнопку, появляется дополнительный запрос на изображение, и это очень плохо. У какого тела есть лучший ответ?
Иман

Ответы:


620

Для настройки на готово:

$(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);

            });
    });

7
Это не работает, если src является абсолютным URL с. в нем (например, www.example.com)
Киран Эндрюс

8
Это также не работает, если вы используете домен, такой как www.over.com, или overгде-то еще в URI.
Бенджамин Маннс

32
могу ли я предложить отредактировать финальный файл .replace с помощью .replace ("over.gif", ".gif");
Натан Куп

2
Спасибо за публикацию этого. Надеюсь, вы не против, что я разместил это в своем блоге. Мой блог похож на «записную книжку», и это мое «занятие», когда я что-то забываю.
Венберт

1
Нет необходимости использовать метод .match (/[^\.]+/) и с Regex. ".Replace (". Gif "," over.gif ") достаточно для его работы.
Navigatron

114

Я знаю, что вы спрашиваете об использовании 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


1
да, но это немного сложнее сделать с элементами IMAGE :) Кроме того, CSS означает отделение контента от презентации. Если вы делаете это, вы присоединяетесь к этим вещам;) У вас не может быть этого для большого сайта, верно?
Ionuț Staicu

Я согласен с вами по поводу css, но, похоже, автор вопроса хотел универсального решения, которое применимо к нескольким изображениям одновременно.
Джаррод Диксон

9
Это решение является наиболее предпочтительным вариантом, если вы не делаете некоторые эффекты. Я думал точно так же +1
Angel.King.47

6
Это лучшее решение. Чтобы избежать ожидания нового изображения (сетевой запрос), используйте один файл image.jpg и поиграйте с background-position, чтобы показать / скрыть хорошее.
Херауд

2
@kheraud Перемещение отдельного изображения - хорошее решение, но от того, будет ли оно наилучшим или нет, зависит от размера изображения. Например, в медленном интернете загрузка двух изображений шириной 1920px в один гигантский файл займет недопустимо много времени. Для иконок и небольших изображений, хотя это работает нормально.
DACrosby

63

Если у вас более одного изображения, и вам нужно что-то общее, не зависящее от соглашения об именах.

HTML

<img data-other-src="big-zebra.jpg" src="small-cat.jpg">
<img data-other-src="huge-elephant.jpg" src="white-mouse.jpg">
<img data-other-src="friendly-bear.jpg" src="penguin.jpg">

JavaScript

$('img').bind('mouseenter mouseleave', function() {
    $(this).attr({
        src: $(this).attr('data-other-src') 
        , 'data-other-src': $(this).attr('src') 
    })
});

1
Это был один для меня. Просто не забудьте поместить javascript в функцию для ее выполнения, т.е. когда DOM готов "$ (function () {});"
Миша

На самом деле он срабатывает, когда страница все еще загружается, а когда курсор мыши находится на самом деле над селектором, он заменяет URL, поэтому эффект инвертируется
Mike

57
    /* Teaser image swap function */
    $('img.swap').hover(function () {
        this.src = '/images/signup_big_hover.png';
    }, function () {
        this.src = '/images/signup_big.png';
    });

4
Имейте в виду, что такой путь будет означать, что пользователь увидит паузу при первом наведении, пока браузер выбирает изображение.
Тайсон

1
@Tyson Ненавижу садиться на поезд поздно, но вы можете предварительно загрузить изображения с помощью Javascript или CSS
cbr

Также не работает на Chrome 37. $ (this) .attr ("src", src) работает нормально.
Le Droid

25

Общее решение, которое не ограничивает вас только «этим изображением» и «тем изображением», может заключаться в добавлении тегов «onmouseover» и «onmouseout» в сам код HTML.

HTML

<img src="img1.jpg" onmouseover="swap('img2.jpg')" onmouseout="swap('img1.jpg')" />

JavaScript

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

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

HTML

<img src="img1.jpg" id="ref1" />
<img src="img3.jpg" id="ref2" />
<img src="img5.jpg" id="ref3" />

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"]);
  }

21
$('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(){

и так далее.

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


2
+1 Дох, забыл про помощника по парящим событиям! И хорошее предложение о добавлении класса к изображениям - действительно, это лучшая практика :)
Джаррод Диксон

1
Это гораздо лучшее решение, потому что оно кэширует старый источник изображения.
Тран

Отрицательная часть состоит в том, что если изображение находится внизу страницы и имеется 10-20 изображений, макет становится странным.
Тран

13

Я надеялся на супер лайнер, как:

$("img.screenshot").attr("src", $(this).replace("foo", "bar"));

6

Если вы ищете решение для анимированной кнопки, то лучшее, что вы можете сделать для повышения производительности, - это сочетание спрайтов и CSS. Спрайт - это огромное изображение, которое содержит все изображения с вашего сайта (заголовок, логотип, кнопки и все ваши украшения). Каждое имеющееся у вас изображение использует HTTP-запрос, и чем больше 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 (или любой фреймворк) - лучший.

Радоваться, веселиться!


4
$('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); 
});

4

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

Он обрабатывает два изображения, которые почти всегда по умолчанию имеют значение «выкл.», Когда мышь отключена (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>

Я понимаю, что вышеупомянутая функция будет выполняться для всех изображений в DOM, как это в настоящее время закодировано. Предоставление дополнительного контекста позволит сосредоточить эффект на конкретных элементах img.
Кристофер Рут

3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery</title>
<script src="jquery.js" type="text/javascript"> </script>
<style type="text/css">
    #box{
        width: 68px;
        height: 27px;
        background: url(images/home1.gif);
        cursor: pointer;
    }
</style>

<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>
</head>

<body>
<div id="box" onclick="location.href='index.php';"></div>
</body>
</html>

2

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

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

$('#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);
});

1
<img src="img1.jpg" data-swap="img2.jpg"/>



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();

1

Адаптировано из кода Ричарда Айотта - для нацеливания на img в списке ul / li (находится здесь через класс div-оболочки), что-то вроде этого:

$('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') }
); 
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.