Промяна на източника на изображението при преобръщане с помощта на jQuery

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

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

Изображение за преобръщане: Imageover.gif

Искам да вмъкна и премахна "over" частта от източника на изображението съответно в събитията onmouseover и onmouseout.

Как мога да го направя с помощта на jQuery?

lowtechsun
Редактиран въпрос Направете април 2016 в 10:12
Програмиране
html jquery
Направете февруари 2009 в 7:28
11 изгледи
Решение

Да се настроите на готово:

$(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
Редактиран отговор Направете януари 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
Редактиран отговор Направете септември 2017 в 11:24
Коментари (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(){

и т.н.

Би трябвало да работи, но не съм го тествал :)

pawelmech
Редактиран отговор Направете март 2011 в 2:40
Коментари (3)