简体   繁体   English

检测点击了带有imagemap的图像

[英]Detect which image with imagemap was clicked

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. 我创建了一个小javascript应用程序,将建筑物(简单图像)放置在地图上并可以在周围拖动。 When a user clicks on a building, the building can be easily retrieved using e.target, then dragged around. 当用户单击建筑物时,可以使用e.target轻松检索建筑物,然后四处拖动。 When adding an imagemap (to increase click accuracy) however, e.target no longer works. 但是,当添加图像映射(以提高点击准确性)时,e.target不再起作用。 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? 当图像使用imagemap时,javascript无法检测到图像被单击似乎有点奇怪?

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? 因此,如果您有两个图像,都使用usemap =“ samemap”,那么如何找出触发图像映射时单击的两个图像?

I found a solution to this problem by using document.elementFromPoint(x,y). 我通过使用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. 对于Opera和Firefox,即使图像映射仍然存在,elementFromPoint也会提供图像。 For Internet Explorer and Google Chrome I had to temporarily disable the imagemap, use document.elementFromPoint, and re-enable the imagemap. 对于Internet Explorer和Google Chrome,我不得不暂时禁用图像映射,使用document.elementFromPoint,然后重新启用图像映射。

After finding this out, I switched to another method, but maybe it helps someone else. 找到答案后,我改用另一种方法,但也许对其他人有帮助。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM