查询坐标

Question

嗨，我有一个DIV，上面有一个大约有40个表情符号的精灵。它的200px * 100px和每个表情符号大约是25 * 25px。

我希望能够使用鼠标来解释每个表情符号 - 例如：':) smile'。

我被建议使用此代码进行坐标：

$("#div").mousemove(function(e)
{
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
});

这很有效 - 它可以很好地显示鼠标位置 - 非常满意。

我不确定如何更改此代码，以便我可以确定点区域....

我试过了：

$("#div").mousemove(function(e)
{
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;

    if(x < 1 && x > 25) && (y < 1 && y > 25) {
        alert('captured mouse over');
    }
});

但这不起作用 - 我如何捕获特定区域事件？

THX

Answer 1

将您的if条件更改为：

if(x>=0 && x<25 && y>=0 && y<25)

另见jsfiddle。

Answer 2

我只是将空的<div>元素附加到具有绝对位置的容器中，每个元素根据您必须定义的映射具有适当的标题。代码会更好地解释它：

var iconWidth = 25;
var iconHeight = 25;
var toolTips = {
    "0,0": "big grin",
    "0,25": "cool", 
    "25,0": "wink"
};
var container = $("#Container");
container.css("position", "relative");
var totalWidth = container.width();
var totalHeight = container.height();
for (var x = 0; x <= totalWidth; x += iconWidth) {
    for (var y = 0; y <= totalHeight; y += iconHeight) {
        var toolTip = toolTips[x + "," + y];
        if (toolTip) {
            var newDiv = $("<div />").css({"position": "absolute", "width": iconWidth + "px", "height": iconHeight + "px", left: x + "px", top: y + "px" }).attr("title", toolTip);
            container.append(newDiv);
        }
    }
}

映射使用x,y格式，例如定义从给定的X和Y像素坐标开始的图标的工具提示。

Live test case使用您自己的图片。 （出于某种原因，每个图标的尺寸为40x40，无论如何只是悬停在笑容，眨眼和酷炫的图标上:)）

Answer 3

无需javascript - 只需使用title属性：

<img src="emoticons/smile.png" title=":) smile" />