Определение, где пользователь нажимает на изображение - PullRequest
Новая
       20

Определение, где пользователь нажимает на изображение

2 голосов
/ 10 марта 2011

Я работаю с Javascript / Jquery и CSS, чтобы «фоновое» изображение карты Оклахомы заполнило весь экран.Идея состоит в том, что пользователь будет щелкать определенную одну из нескольких «областей» карты, и событие будет происходить в зависимости от того, в какую область он щелкает.

Моя проблема в том, что мне нужно определить, где пользователь нажимает.Я играл с использованием пикселей, но пиксели ненадежны, так как размеры меняются в зависимости от размера экрана.Я думал о том, чтобы разделить фоновое изображение на отдельные изображения и сделать их каждый своим собственным контейнером, но это кажется излишне сложным.

Итак, есть ли способ определить, где пользователь нажимает на экран?Я могу предоставить немного кода, который я сделал и попробовал немного;сейчас все по частям, так как я все еще пробую разные вещи!

Вот одна вещь, которую я пробовал ранее: 

$(document).ready(function()
{
    $("#container").click(function(e)
    {
        var x = ("#container").pageX;
        var y = ("#container").pageY;
        if(x >= ? && x <= ? && y >= ? && y <= ?) 
        {
            alert('You clicked the panhandel!');
        }
   }); 
});

Я устанавливаю значения x и y в операторе ifтребования к значениям пикселей, которые «упаковали» область, в которой я хотел, чтобы всплыло предупреждение, но ничего не произошло.

РЕДАКТИРОВАТЬ Спасибо за вашу помощь и время, я очень ценю это!Последнее, что меня смущает, это то, что должно идти внутри if ().Так как элемент будет БЕЗ размера экрана, я не думаю, что мне действительно нужно смещение, но 

<code> if(x >= 200 && x <= 300 && y >= 200 && y <= 300)
не будет точным для экрана другого размера;

То есть "координаты "Я выясняю, насколько большой участок изображения может быть другим для экрана другого размера, так что мне делать с x и y?

Я не уверен, как объяснить это прилично, и еслина эту последнюю часть ответить невозможно, я пойму и буду искать!

1 Ответ

2 голосов
/ 10 марта 2011

http://api.jquery.com/event.pageX/ и http://api.jquery.com/event.pageY/

$(element).click(function(event) {
    var x = event.pageX,
        y = event.pageY;
});
...