Jquery: événement mouseover sur la zone de carte-image

Je suis en train de faire des actions à la souris d'une image de la carte de la zone. Voici mon code HTML:

<img src="img/denisanddavid-bkgd.jpg" alt="Denis and David - web development and solution" width="1024" height="1299" border="0" usemap="#bkgdMap" id="bkgd" />
    <map name="bkgdMap" id="bkgdMap">
         <area shape="rect" coords="12,161,341,379" href="#" alt="qdk" id="qdk" class="mapping" />
         <area shape="rect" coords="347,162,675,379" href="#" alt="gifgif" alt="gifgif" class="mapping" />
    </map>

Et voici mon js:

$('.mapping').mouseover(function() {

    alert($(this).attr('id'));

}).mouseout(function(){
    alert('Mouseout....');      
});

Je ne comprends pas pourquoi, mais le jquery est lancé pour la première zone et pas les autres. Toute aide serait grandement appréciée.

Grâce.

OriginalL'auteur denislexic | 2011-08-08

  1. 4

    J'ai juste essayé votre code dans Safari et il fonctionne comme prévu. 2 zones distinctes qui donnent alertes distinctes. On est en alerte "qdk" et autres "undefined", comme vous n'avez pas un attribut ID pour la deuxième carte.

    bonne prise, je n'ai même jamais regardé à l'IDs 🙂 Triste, c'est que j'ai gravé moi-même avant.

    OriginalL'auteur margusholland

  2. 0

    Avez-vous essayez d'utiliser hover?

    exemple de jquery site...

    $("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

    OriginalL'auteur Mfoo