检测点击了哪个带有图像映射的图像

发布于 2024-08-31 03:45:08 字数 313 浏览 4 评论 0原文

当您有多个共享相同图像映射的图像时,是否有任何方法可以检测用户单击图像时单击了哪个图像?

我创建了一个小的 javascript 应用程序,其中建筑物(简单图像)被放置在地图上并且可以拖动。当用户单击建筑物时,可以使用 e.target 轻松检索该建筑物,然后进行拖动。然而,当添加图像映射(以提高点击准确性)时,e.target 不再起作用。还有办法找出点击的图像吗?当图像使用图像映射时,javascript 无法检测到图像被单击,这似乎有点奇怪?

那么,如果你有两个图像,都使用 usemap="samemap",那么当图像映射被触发时,如何找出单击了两个图像中的哪一个呢?

When you have multiple images that share the same imagemap, is there any way to detect which image was clicked on when a user clicks on the image?

I have created a little javascript app, where buildings (simple images) are placed on a map and can be dragged around. When a user clicks on a building, the building can be easily retrieved using e.target, then dragged around. When adding an imagemap (to increase click accuracy) however, e.target no longer works. Is there still a way to find out what image was clicked? It seems a bit weird that javascript can't detect that an image was clicked, when that image uses an imagemap?

So, if you have two images, both using usemap="samemap", how to find out which of the two was clicked when the imagemap is triggered?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

爱她像谁 2024-09-07 03:45:08

我通过使用 document.elementFromPoint(x,y) 找到了解决此问题的方法。它只是告诉哪个元素位于给定坐标处。通过在单击图像映射时捕获鼠标单击的坐标,这可以用于查找图像映射下方的图像。对于 Opera 和 Firefox,elementFromPoint 会给出图像,即使图像映射仍然存在。对于 Internet Explorer 和 Google Chrome,我必须暂时禁用图像映射,使用 document.elementFromPoint,然后重新启用图像映射。

发现这一点后,我改用了另一种方法,但也许它对其他人有帮助。

I found a solution to this problem by using document.elementFromPoint(x,y). It simply tells what element lies at a given coordinate. By catching the coordinates of the mouseclick when clicking on an imagemap, this can be used to find the image that is below the imagemap. For Opera and Firefox elementFromPoint gives the image, even when the imagemap is still there. For Internet Explorer and Google Chrome I had to temporarily disable the imagemap, use document.elementFromPoint, and re-enable the imagemap.

After finding this out, I switched to another method, but maybe it helps someone else.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文