Image swap de l'infobulle jquery

Je rencontre actuellement quelques problèmes pour obtenir un mouseover et mouseout de la fonction de travail en jquery. J'ai deux images appelées 'images/doomsday.jpg" et l'autre, appelé " keep_calm.png' qui je veux swap lorsque la souris est au-dessus d'eux et le swap en arrière quand il ne l'est pas. J'ai inclus le code, je suis en train d'essayer d'utiliser, tout le monde peut voir les problèmes avec elle et où je vais mal?

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

});

OriginalL'auteur Ben Thompson | 2013-01-07

  1. 7

    Votre sélecteurs sont mauvais. Vous pouvez en apprendre davantage sur les sélecteurs ici.

    Ici est un démo de l'image de permutation.

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

    OriginalL'auteur Pranav 웃

  2. 1

    peut-être quelque chose comme ceci DÉMO: http://jsfiddle.net/m4WuU/ suffit d'utiliser Jquery 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'); 
});

    OriginalL'auteur InTry

  3. 1

    Il n'y avait pas de sélecteurs utilisés. Voici comment votre code final doit ressembler à

    Le code HTML

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

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

    OriginalL'auteur Herbert Musoke

  4. 0

    Apparemment le sélecteur est faux:
    Vous devriez utiliser, par exemple, $("#imageid") où l'image id est l'id de l'image que vous souhaitez modifier.

    OriginalL'auteur Felice Pollano