javascript - jQuery 对图像的 HitTest

Question

我有一张固定大小的 5 颗星图片(每颗星也是固定宽度的)。当使用悬停在每颗 5 颗星上时，我想跟踪并做出回应。

我已经进行了一些谷歌搜索，但没有找到在 JavaScript/jQuery 中处理此问题的明确方法。我知道有获取鼠标坐标的 API，但如何获取图像内的坐标？

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

Answer 1

您可以使用图像映射:

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

2. 在 area 元素上使用 mouseover 和 mouseout 事件，当鼠标指针碰撞和离开时触发一个 Action 星级。

演示

重复使用来自 Prisoner's answer 的星形图像:

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