Schimba sursa imaginii pe rollover folosind jQuery

Am câteva imagini și imaginile rollover. Folosind jQuery, vreau pentru a afișa/ascunde imagine rollover când onmousemove/onmouseout eveniment să se întâmple. Toate numele de imagine urmează același model, astfel:

Imagine Originală: Image.gif

Imagine Rollover: Imageover.gif

Vreau pentru a introduce și a scoate "peste" parte din imaginea sursă în onmouseover și onmouseout eveniment, respectiv.

Cum pot face folosind jQuery?

lowtechsun
Întrebarea editată 18 aprilie 2016 в 10:12
Programare
html jquery
12 februarie 2009 в 7:28
9 vizualizări
Comentarii la întrebare (4)
Soluția

Pentru a configura pe de-a gata:

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

Pentru cei care folosesc url surse de imagine:

$(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
Răspuns editat 4 ianuarie 2019 в 4:41
Comentarii (10)

Știu că're întrebat despre utilizarea jQuery, dar puteți obține același efect în browsere care nu au JavaScript dezactivat folosind 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);
}

Nu's o descriere mai lungă aici

Chiar mai bine, cu toate acestea, este de a folosi sprite: simplu-css-imagine rollover

ankit suthar
Răspuns editat 8 septembrie 2017 в 11:24
Comentarii (6)

Dacă aveți mai mult de o imagine și ai nevoie de ceva generic care nu't depinde de o convenție de denumire.

HTML

JavaScript

$('img').bind('mouseenter mouseleave', function() {
    $(this).attr({
        src: $(this).attr('data-other-src') 
        , 'data-other-src': $(this).attr('src') 
    })
});
Comentarii (2)
    /* Teaser image swap function */
    $('img.swap').hover(function () {
        this.src = '/images/signup_big_hover.png';
    }, function () {
        this.src = '/images/signup_big.png';
    });
Comentarii (4)

O soluție generic care nu't limita la "această imagine" și "imaginea" numai poate fi pentru a adăuga 'onmouseover' si 'onmouseout' tag-uri la cod HTML în sine.

HTML

JavaScript

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

În funcție de configurare, poate ceva de genul asta ar merge mai bine (și necesită mai puțin HTML modificare).

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
Răspuns editat 11 septembrie 2013 в 7:56
Comentarii (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
    });
});

Poate vrei să te schimbi clasa de imagini din prima linie. Dacă aveți nevoie de mai mult de imagine clase (sau pe altă cale) puteți utiliza

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

și așa mai departe.

Ar trebui sa mearga, eu am't test :)

Comentarii (3)

Am fost în speranța pentru o über o linie de genul:

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

Soluția dacă sunteți în căutarea pentru este pentru un buton animat, apoi, tot ce pot face pentru a îmbunătăți performanța este o combinație de sprite și CSS. Un sprite este o mare imagine care conține toate imaginile de pe site-ul (antet, logo, butoane, și toate decoratiunile trebuie). Fiecare imagine trebuie folosește o cerere HTTP, și cele mai multe cereri HTTP de mai mult timp le va lua pentru a încărca.

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

Anii 0px 0px coordonatele vor fi colțul din stânga sus de la sprite.

Dar dacă sunteți în curs de dezvoltare un album foto cu Ajax sau ceva de genul asta, atunci JavaScript (sau orice cadru) este cel mai bun.

Distreaza-te!

kevinji
Răspuns editat 29 iulie 2013 в 7:20
Comentarii (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); 
});
Comentarii (0)

Timp în căutarea pentru o soluție ceva timp în urmă, am găsit un anunț similar script-ul de mai jos, care, după unele tweaking am fost de lucru pentru mine.

Acesta se ocupă de două imagini, care aproape întotdeauna implicit la "off", în cazul în care mouse-ul este de pe imagine (image-example_off.jpg), și ocazional "pe", în cazul în care pentru ori mouse-ul este planat, necesare imagine alternativă (image-example_on.jpg) este afișat.

<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
Răspuns editat 29 iulie 2013 в 9:30
Comentarii (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>
Comentarii (0)

Am'am facut ceva de genul următorul cod :)

Aceasta funcționează numai atunci când ai un al doilea fișier cu numele cu _hover, de exemplu, facebook.png " și " 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);
});
Peter Mortensen
Răspuns editat 29 iulie 2013 в 9:28
Comentarii (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();
Comentarii (0)

Adaptat de la Richard Ayotte's cod - Pentru a viza o img într-o ul/li listă (constatat prin înveliș div class aici), ceva de genul asta: 

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