Jquery: zdarzenie mouseover na obszarze mapy obrazu

Question

Próbuję wykonać działania na mouseover obszaru mapy obrazu. Tu jest mój 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> 

I tu jest moje JS:

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

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

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

ja nie rozumiem dlaczego, ale jQuery jest uruchamiany tylko dla pierwszego obszaru, a nie innych. Każda pomoc będzie bardzo ceniona.

Dzięki.

Answer 1

Próbowałem tylko swój kod w Safari i działa tylko zgodnie z przeznaczeniem. 2 oddzielne obszary, które przekazują oddzielne ostrzeżenia. Jednym z nich jest alarmowanie "qdk" i innych "niezdefiniowanych", ponieważ nie masz atrybutu identyfikatora dla drugiej mapy.

Answer 2

Czy próbowałeś użyć hover?

przykład ze strony jquery ...

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