Jquery: mouseover event on image map area

I'm trying to do actions on mouseover of an image map area. Here is my 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="re开发者_如何转开发ct" 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>

And here is my js:

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

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

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

I don't understand why, but the jquery is only launched for the first area and not the others. Any help would be greatly appreciated.

Thanks.

I just tried your code in Safari and it works just as intended. 2 separate areas that give out separate alerts. One is alerting "qdk" and other "undefined", as you don’t have an ID attribute for the second map.

Did you try using hover?

example from jquery site...

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