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

Question

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

回答

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

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

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

Image Mapping

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

jQuery RWD Image Maps

Answer 1

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

回答

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

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 应用程序的图像

Adding popup list to an image for a Mobile Web Application

html

mobile

jquery-mobile