javascript - 对图像进行 jQuery 命中测试

Question

我有一个 5 颗星的固定大小的图像（每颗星也是固定宽度）。当用户悬停在 5 颗星上时，我想跟踪并做出响应。

我做了一些谷歌搜索，但没有找到在 JavaScript/jQuery 中解决这个问题的明确方法。我知道有用于获取鼠标坐标的 API，但是如何获取图像中的坐标？

获取鼠标相对于悬停图像的坐标的任何提示或链接？

Answer 1

您可以使用图像映射：

1. 使用Image Mapper创建五个 HTML 图像地图区域，确保为五颗星中的每一个添加一个“热点”。

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

演示

重用囚犯回答中的星图：

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

HTML

<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');
});

Answer 2

也许是这样的（可以优化，我只是匆匆忙忙）：

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{ width: 300px; 光标：指针；}

HTML

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

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