用于记录用户选择的响应图像

时间:2017-12-05 11:58:18

标签: html responsive-design user-input interactive

我希望允许用户在平板电脑/手机中点击照片的特定部分(通过网络浏览器或软件),然后记录他们的选择。

基本上我有一些航拍照片,我想放置一个规则的网格(比如顶部100米x 100米)。此网格将是半透明的,如果未单击(“关闭”),每个网格单元将清晰,单击时(“打开”)将变为蓝色。如果“开启”或“关闭”,每个网格单元将存储一个值。

这最好使用空间参考的地理图像来完成,但不是必需的。

我在GIS相关软件方面有很多经验,但我正在寻找一个简单的解决方案。

这可能吗? 建议使用什么工具,网络语言(html,java等)或软件。 响应式图像地图在这里似乎有点相关,但我不确定?

1 个答案:

答案 0 :(得分:1)

可以跟踪图像上的用户交互。您可以覆盖可点击的div网格,只需听取每个div的点击次数。

这是一种方法,我在图像上放置一个10x10网格div
https://jsfiddle.net/o31p99wh/

关键是要知道图像的大小/比例,并确保将图块映射到该图块。例如。每个35 x 35px方块都映射到350 x 350m