Javascript 在不同屏幕大小的图像中检测鼠标单击的位置-JS/Jquery

我以前问过这个问题，回答告诉我我知道我需要做什么，但没有提供一个例子，所以我还没有找到解决方案

我有一个名为“container”的初始div，它是俄克拉荷马州地图的

高度：100%宽度：100%

图像。其思想是，当用户单击地图的某一部分（例如，panhandle）时，div被切换到一个div，即panhandle图像。我通过知道鼠标单击时的像素位置来确定用户单击的位置

问题是，不同尺寸的屏幕的像素值不同。我被告知，为了根据用户的屏幕大小调整我的计算，我需要：

在比较之前缩放每个值。每x乘以标准宽度，除以实际宽度，y和高度也一样

我被“每个x乘以你的标准宽度，除以实际宽度”弄糊涂了。我继续尝试缩放。我发现panhandle的第一个边缘距离屏幕左侧3.1%，最远的边缘距离屏幕左侧35.7%。我有以下代码：

$("#container").click(function(e)
    {
        var x = event.pageX;
        var y = event.pageY;

        // Variables for area of pan handle
        /* These variables do not seem to work yet */
        var xScale1 = 0.031*x;
        var xScale2 = 0.357*x;

        if(x >= xScale1 && x "less-than"= xScale2) 
        {
        alert("You clicked the panhandle!");
        }   
     }  

---

当我在panhandle的水平范围内单击时，应该会弹出一个警报，但什么也没有发生。我注意到我没有用任何值除以“实际宽度”。有人能提供一个例子，说明如何“将每个x乘以标准宽度，然后除以实际宽度”

他们所说的标准宽度是“正常”宽度，在您的例子中，它是图像的本机大小

假设你在地图上使用的图像通常是1280 x 1600 px（只是为了参数），那么你的标准高度是1600 px，标准宽度是1280 px

因此，如果我在一个800 x 600像素的屏幕上观看图像，即800像素高，600像素高，那么我需要将图像缩放为800/1600=0.5倍的高度，600/1250=0.48倍的宽度

类似地，如果我点击屏幕左侧的第400个像素，以及实际屏幕顶部的第200个像素，那么我可以通过除以先前确定的比率来获得“标准”位置。所以（400200）=>（800416.7）

然后，您可以使用这些规范化的值来查找他们单击了图像的哪个部分

说了这么多，我真的不推荐这样做！这是使用html imagemaps的完美案例：。看看

---

希望这有帮助

我不知道这个圆锥形的东西，但从数学上来说，我用一种非常简单的方式来看待你的问题。我猜你的地图是一个图像，图像的大小是恒定的。 假设您的地图是100x100。如果屏幕大小为200x200，则屏幕比地图大2倍

xScreen = 2*xMap;
yScreen = 2*yMap;

因此，用于屏幕的所有值都比用于实际地图的值大2倍。 如果用户单击200x200屏幕中的50,50像素，则必须将其除以2（比例），在100x100地图中得到25,25。 关键是将屏幕的总大小除以地图的总大小来确定比例。在这种情况下：

xScreen/xMap = 2;//200/100 = 2;
yScreen/yMap = 2;//200/100 = 2;

以下是查找比例的代码：

var xScreen = screen.width;
var yScreen = screen.height;
var xProportion = xScreen/xSizeOfYourMap;
var yProportion = yScreen/ySizeOfYourMap;
$("#container").click(function(e)
{
    var x1 = event.pageX;
    var y1 = event.pageY;

    var x2 = x1/xProportion;
    var y2 = y1/yProportion;

    alert("x of screen:"+x1+" - x of map:"+x2);
 });

---

现在你有了点击地图的值，你可以计算用户是否点击了你想要的区域。对于所有计算，数字都需要通过比例。

因此，地图大小永远不会恒定？地图大小将始终与屏幕大小相同。问题是屏幕大小可能不同，因此使用恒定像素值不是一个选项，因为屏幕左边缘右侧的200像素对于不同大小的屏幕将是不同的位置。这里有很多错误。。。。。您已将e作为参数传递，然后正在调用事件。没有结束）；关于你的功能和。。。。x“小于”应该是什么？您已经检查了文本字符串是否与数值相同，您将永远不会收到警报！我有结案通知；在我的实际代码中。我在引号中加上“小于”，因为我不能在代码块中加一个<而不把代码块弄乱。在我的实际代码中，我有一个例子，它确实很有帮助。我会开始的。我已经看过html图像映射，但我会再看一遍谢谢