将弹出列表添加到移动 Web 应用程序的图像

Question

我正在使用jQuery Mobile来创建移动Web应用程序。我有一个图像(它可以转换为任何格式，目前是TIFF)。图像将显示在电话/桌子上。我想在图像上有链接，我想在用户单击链接时显示一个数据弹出列表。每个链接都有单独的数据。我的问题是最好的方法是什么？如何将图标添加到图像上的特定位置？我愿意使用 html5 或查询移动解决方案。谢谢。

答

我找到了这个问题的最佳答案。它使用内置的html5标签。下面是如何使用它的示例：

https://html.com/images/how-to-make-an-image-map

我还找到了一个网站来为图像创建可点击的坐标：

图像映射

最后，我找到了一个插件，它允许通过重新计算区域坐标以匹配加载和窗口时的实际图像大小来在移动应用程序中使用地图。

j查询 RWD 图像映射

Answer 1

我找到了最好的答案！如果有人有更好的解决方案，请随时发布您的解决方案。

答

答案是在 html 5 中使用<map>标记。请参阅此处的示例：

https://www.w3schools.com/tags/tag_map.asp

这是完整的工作示例：

<script>
function clickmap(info) 
{
alert(info);
}
</script>
<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="#" onclick="clickmap('someinfo 1')" alt="Sun">
<area shape="circle" coords="90,58,3" href="#" onclick="clickmap('someinfo 2')" alt="Mercury">
<area shape="circle" coords="124,58,8" href="#" onclick="clickmap('someinfo 3')" alt="Venus" >
</map>