Html 为移动Web应用程序向图像添加弹出列表

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

回答

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

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

最后，我找到了一个插件，通过重新计算面积坐标以匹配加载和窗口时的实际图像大小，可以在移动应用程序中使用地图。调整大小：

---

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

回答

答案是在HTML5中使用

标记。请参见此处的示例：

下面是一个完整的工作示例：

<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>

功能点击地图（信息）
{
警报（信息）；
}

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

回答

答案是在HTML5中使用

标记。请参见此处的示例：

下面是一个完整的工作示例：

<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>

功能点击地图（信息）
{
警报（信息）；
}