jQuery图像命中测试

jQuery Hit Testing over Image

本文关键字：测试 图像 jQuery      更新时间：2023-09-26

我有一个单一的，固定大小的5颗星的图像(每颗星也是一个固定的宽度)。我想跟踪和响应的使用悬停在每一个5颗星。

我已经做了一些谷歌搜索，但没有找到一个明确的方法来实现这在JavaScript/jQuery。我知道有用于获取鼠标坐标的api，但我如何获得图像中的坐标呢?

任何提示或链接获取鼠标坐标相对于一个图像被悬停?

您可以使用图像映射:

  1. 使用image Mapper创建五个HTML图像映射区域，确保为每一个五星级添加一个"热点"。

  2. 使用area元素上的mouseover和mouseout事件来触发鼠标指针碰撞并离开星形时的动作。

重新使用囚犯回答中的星图:

http://jsfiddle.net/4GgBu/1/

<img src="http://i.imgur.com/CwkF2Hr.jpg" usemap="#image-map" />
<map name="image-map" id="image-map">
    <area shape="poly" class="star" coords=" 79,11, 63,56, 13,59, 52,91, 36,139, 79,110, 120,139, 105,91, 147,59, 95,56, 79,10" href="#" alt="star 1" />
    <area shape="poly" class="star" coords=" 257,9, 241,59, 189,59, 232,91, 215,139, 256,109, 300,138, 285,89, 325,59, 274,58, 259,13" href="#" alt="star 2" />
    <area shape="poly" class="star" coords=" 420,58, 367,58, 409,89, 393,138, 436,110, 478,140, 463,90, 504,59, 453,57, 436,11, 420,55" href="#" alt="star 3" />
    <area shape="poly" class="star" coords=" 614,12, 596,58, 549,60, 587,89, 571,138, 613,111, 656,141, 640,88, 679,58, 631,57, 618,15" href="#" alt="star 4" />
    <area shape="poly" class="star" coords=" 774,58, 726,60, 767,88, 750,139, 792,110, 835,140, 819,91, 862,58, 808,56, 791,9, 776,57" href="#" alt="star 5" />
</map>
<p class="message">Rollover a star to see this message update.</p>
JavaScript

var $stars = $(".star");
$stars.mouseover(function(e){
    var starID = $stars.index(e.target) + 1;
    $('.message').text('Star ' + starID + ' rolled over');   
});
$stars.mouseout(function(e){
    var starID = $stars.index(e.target) + 1;
    $('.message').text('Star ' + starID + ' rolled out');
});

也许是这样的(可以优化，我只是匆忙):

Javascript

var NUMBER_STARS = 5
$("img").click(function(e){
    var left = e.pageX-$(this).offset().left;
    var selected_stars = 0;
    for(var i = 0; i < NUMBER_STARS; i++){
        if($(this).width() / NUMBER_STARS * i < left){
            selected_stars++;
        }
    }
    alert(selected_stars);
});

为光标添加一点css:img {宽度:300 px;光标:指针;}

HTML

<img src="http://i.imgur.com/CwkF2Hr.jpg" />

jsfiddle: http://jsfiddle.net/wp7sg/1/

相关文章：