相对于全屏幕背景图的绘图点

Question

我遇到了我正在构建的网站上的定位问题。我有一个根据浏览器尺寸缩放的全屏幕背景图片。我想要做的就是在图片上绘制“兴趣点”，这样当用户悬停在一个图片上时，会弹出一个说明。问题是，图像会根据浏览器尺寸缩小和增长，并且我无法将点保持在正确的位置。

这里是测试版本：http://recoverstudio.com/test-build/gallery.html 小“+”是感兴趣的点。我希望在调整浏览器窗口大小时保留在电视上。

任何帮助，非常感谢。

Answer 1

你可以做的一件事就是让兴趣点成为图像顶部的图像地图。

另一种选择是将基础图像视为矢量图像，然后将整个页面作为一个大的SVG图像。这将允许您定义矢量空间中的点，它将在缩放时保持不变。

Answer 2

看看ezBgResize是如何工作的，似乎您需要重新计算每个感兴趣的地点在调整大小时的位置。

您基本上必须检查$（“＃jq_ez_bg”）的尺寸并相应地移动所有点。您当然必须确保点的大小在图像大小调整后完成。