Jquery: mouseover event on image map area

Question

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="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>

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.

Answer 1

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.