Проверьте на картинке, какая область находится в данный момент.

Question

Мне нужно знать, в какой области пользователь витает на изображении, которое я сопоставил. То, что я пробовал, дает разные классы для областей и с помощью jQuery я обнаруживаю, какой из них завис.

Это мой html:

<img src="test.jpg" usemap="#map" id="testMap"/> 
    <map id="map" name="map"> 
     <area class="area1" shape="poly" alt="" title="" coords="37,459,145,378,111,347,17,436,25,446" href="" target="" /> 
     <area shape="poly" alt="" title="" coords="118,460,224,379,192,347,96,436" href="" target="" /> 
     <area class="area1" shape="poly" alt="" title="" coords="305,379,198,460,176,435,272,348" href="" target="" /> 
     <area shape="poly" alt="" title="" coords="350,349,385,379,272,464,276,457,257,436" href="" target="" /> 
     <area shape="poly" alt="" title="" coords="433,349,466,380,359,460,337,436" href="" target="" /> 
     <area shape="poly" alt="" title="" coords="512,348,545,379,432,464,437,456,415,436" href="" target="" /> 
     <area shape="poly" alt="" title="" coords="590,349,622,380,511,463,516,456,495,435,590,348" href="" target="" /> 
     <area shape="poly" alt="" title="" coords="670,348,703,380,594,460,573,435" href="" target="" /> 
     <area shape="poly" alt="" title="" coords="749,347,783,380,670,463,674,455,656,436" href="" target="" /> 
     <area shape="poly" alt="" title="" coords="830,349,863,380,752,461,733,436" href="" target="" /> 
     <area shape="poly" alt="" title="" coords="910,349,941,379,830,463,834,455,814,437" href="" target="" /> 
    </map> 

И это сценарий я использовал для проверки hover состояния:

<script> 
    $(document).ready(function(){ 
     if ($('.area1').is(':hover')) { 
     alert('hovered'); 
    } 
    }); 
    </script> 

Но я не получаю никакого результата .. Может кто-нибудь объяснить мне, почему?

Answer 1

Что можно сказать о следующем:

$('.area1').hover(function() { 
    alert('hovered'); 
}); 

http://api.jquery.com/hover/

или

$('.area1').on('mouseenter', function() { 
    alert('mouse enter'); 
}); 

http://api.jquery.com/on/