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

Posted 2021-04-05

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

回答

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

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

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

Image Mapping

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

jQuery RWD Image Maps

答案

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

回答

答案是在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>