Блог

Привет, у меня есть DIV, содержащий спрайт, на котором около 40 смайликов. Размер 200 * 100 пикселей, а размер каждого смайлика составляет около 25 * 25 пикселей.

Я хочу иметь возможность использовать курсор мыши для объяснения каждого смайлика — например: ‘:) 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 amp;amp; x > 25) amp;amp; (y < 1 amp;amp; y > 25) {
        alert('captured mouse over');
    }
});
  

но это не работает — как я могу фиксировать события в определенной области?

спасибо

Измените свое if условие на:

 if(x>=0 amp;amp; x<25 amp;amp; y>=0 amp;amp; y<25)
  

Также смотрите мой jsfiddle.

Я бы просто добавил пустые <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.

Живой тестовый пример с использованием вашего собственного изображения. (По какой-то причине для каждого значка это 40×40, в любом случае просто наведите курсор на значки grin, wink и cool :))

Не требуется javascript — просто используйте атрибут title:

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