Jquery: evento mouseover en el área de mapa de imagen

Question

Estoy tratando de realizar acciones en el mouseover de un área de mapa de imagen. Aquí está mi 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> 

Y aquí está mi JS:

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

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

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

que no entiendo por qué, pero el jQuery solamente se pone en marcha por primera zona y no los otros. Cualquier ayuda sería muy apreciada.

Gracias.

Answer 1

Acabo de intentar su código en Safari y funciona como se pretende. 2 áreas separadas que emiten alertas por separado. Uno alerta sobre "qdk" y otro "indefinido", ya que no tiene un atributo de ID para el segundo mapa.

Answer 2

¿Intentaste usar el vuelo estacionario?

ejemplo desde el sitio de jQuery ...

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