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

Question

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

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

Rollover Image: Imageover.gif

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

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

Answer 1

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

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

            });
    });

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

Общее решение, которое не ограничивает вас только «этим изображением» и «тем изображением», может заключаться в добавлении тегов «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"]);
  }

Answer 6

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

и т. Д.

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

Answer 7

Я надеялся на лайнер über one вроде:

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

Answer 8

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

Веселись!

Answer 9

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

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

Answer 10

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