Bild swap jquery mouseover

Ich bin derzeit mit einigen Problemen immer ein mouseover-und mouseout-Funktion in jquery. Ich habe zwei Bilder, sogenannte 'images/doomsday.jpg" und die anderen genannten 'keep_calm.png', die ich tauschen wollen, wenn die Maus über Sie und klicken Sie dann swap zurück, wenn es nicht ist. Ich habe den code ich bin derzeit versuchen, zu verwenden, kann jeder sehen, keine Probleme mit ihm und wohin ich gehe falsch gemacht?

$(function() {
$("images/doomsday.jpg")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "images/keep_calm.png";
        $(this).attr("src", src);
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("images/keep_calm.png");
        $(this).attr("src", src);
    });

});

InformationsquelleAutor Ben Thompson | 2013-01-07

  1. 7

    Ihre Selektoren falsch sind. Sie können erfahren Sie mehr über die Selektoren hier.

    Hier ist ein demo von Bild-swapping.

    Code : 

    $('document').ready(function() {

  $('img').on({
    'mouseover' : function() {
      $(this).attr('src','http://media02.hongkiat.com/css3-code-slim/css3-markup.jpg');
    },
    mouseout : function() {
  $(this).attr('src','http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png');
    }
  });
});

    InformationsquelleAutor Pranav 웃

  2. 1

    vielleicht so etwas wie dieses DEMO: http://jsfiddle.net/m4WuU/ einfach Jquery verwenden toggleClass

    HTML

     <div class="holder"><div>

    CSS:

     .holder { 
     background-image:url('images/keep_calm.png');         
  }


.swapHolder { 
   background-image:url('images/doomsday.png'); 
 }

    JS:

    $('.holder').on('hover', function () {  
   $('.holder').toggleClass('swapHolder'); 
});

    InformationsquelleAutor InTry

  3. 1

    Gab es keine Selektoren verwendet. Hier erfahren Sie, wie Ihre endgültige code sieht wie

    Den HTML -

    <div> <img src="images/doomsday.jpg" id='myimage' /> </div>

    Javascript

    $('document').ready(function() {
$(function() {
$("#myimage")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "images/keep_calm.png";
        $(this).attr("src", src);
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("images/keep_calm.png");
        $(this).attr("src", src);
    });
});
});

    InformationsquelleAutor Herbert Musoke

  4. 0

    Anscheinend ist der Selektor ist falsch:
    Sollten Sie zum Beispiel $("#imageid") wo die Bild-id ist die id des Bildes, das Sie ändern möchten.

    InformationsquelleAutor Felice Pollano

Schreibe einen Kommentar