在映射图像上检查当前正在悬停的区域

Check on a mapped image what area is currently being hovered

本文关键字：悬停 区域 映射 图像 检查      更新时间：2023-09-26

我需要知道用户悬停在我映射的图像上的哪个区域。我所尝试的是给不同的类的区域，并使用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>

但是我没有得到任何结果…有人能告诉我为什么吗?

下面这些呢:

$('.area1').hover(function() {
    alert('hovered');
});
http://api.jquery.com/hover/

或

$('.area1').on('mouseenter', function () {
    alert('mouse enter');
});
http://api.jquery.com/on/

相关文章：