[英]Check on a mapped image what area is currently being hovered
I need to know what area a user is hovering on an Image i've mapped. 我需要知道用户将鼠标悬停在我映射的图像上的哪个区域。 What i've tried is give different classes to the areas and using jQuery I detect which one is being hovered.
我试过的是给区域提供不同的类,并使用jQuery来检测正在徘徊的类。
This is my html
: 这是我的
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>
And this is the script I've used to check for the hover
state: 这是我用来检查
hover
状态的脚本:
<script>
$(document).ready(function(){
if ($('.area1').is(':hover')) {
alert('hovered');
}
});
</script>
But I don't get any result.. Can someone explain me why? 但是我没有任何结果。有人可以解释我为什么吗?
What about the following: 关于以下内容:
$('.area1').hover(function() {
alert('hovered');
});
http://api.jquery.com/hover/ http://api.jquery.com/hover/
or 要么
$('.area1').on('mouseenter', function () {
alert('mouse enter');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.