我正在使用 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!');
}
});
});
我将 if 语句要求中的x
andy
值设置为像素值,这些像素值“装箱”了我希望弹出警报的区域,但什么也没发生。
编辑
感谢您的帮助和时间,非常感谢!我感到困惑的最后一件事是if()
. 由于元素将是屏幕的大小,我不认为我真的需要偏移,但是
if(x >= 200 && x <= 300 && y >= 200 && y <= 300)
对于不同尺寸的屏幕将不准确;
也就是说,对于另一个尺寸的屏幕,我找到的图像的一部分有多大的“坐标”可能会有所不同,那么我应该怎么x
做y
?
我不确定如何体面地解释这一点,如果无法回答最后一部分,我会理解并继续寻找!