Question

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

答案

我找到了解决该问题的最佳方法。它使用内置的html5标签。这是一个使用方法的示例：

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

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

Image Mapping

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

jQuery RWD Image Maps

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>

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

1 个答案: