#jquery
#jquery
Вопрос:
Привет, у меня есть 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');
}
});
но это не работает — как я могу фиксировать события в определенной области?
спасибо
Комментарии:
1. Есть ли какая-либо причина просто не использовать
title
атрибутimg
для этой дополнительной информации?
Ответ №1:
Измените свое if
условие на:
if(x>=0 amp;amp; x<25 amp;amp; y>=0 amp;amp; y<25)
Также смотрите мой jsfiddle.
Комментарии:
1. он не доработан для конкретной области
2. Вы хотите запечатлеть, находится ли мышь в красном прямоугольнике? Я думал наоборот. Я обновил код.
Ответ №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.
Живой тестовый пример с использованием вашего собственного изображения. (По какой-то причине для каждого значка это 40×40, в любом случае просто наведите курсор на значки grin, wink и cool :))
Комментарии:
1. Зачем вам генерировать их с помощью javascript?
2. Потому что это часть одного,
<div>
который уже показывает одно изображение со всеми значками.
Ответ №3:
Не требуется javascript — просто используйте атрибут title:
<img src="emoticons/smile.png" title=":) smile" />