HTML 5 移动设备中某些区域带有链接的图片

Image with links in certain areas in HTML 5 for mobile

我正在开发一个带有 ionic 的移动应用程序,在索引页面中,我想使图像区域可点击,例如链接。我怎样才能做到这一点?在 Javascript 中有没有办法做到这一点?或者定义可点击区域的工具?

参见:http://www.w3schools.com/tags/att_area_coords.asp

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

你要找的是图片图,就是<map> is for. In your case you would add <area shape="circle" coords="x,y,r"... /> for your circles, where x,y are the x and y coordinates and r is the radius. There are even tools to define your own image map for example

请注意,使用 usemap="#myImageMap"<map> 与您的 <img> 连接起来,其中 myImageMapmap 上的 name

<img src="myImage.png" .. usemap="#myImageMap">
<map name="myImageMap">
    <area shape="circle" ... />
    ...
</map>

HTML 标签 map 正是为此而设计的。使用 href="javascript:onClick()" 进行 JS 调用而不是导航。

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
    <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
    <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

MDN 对 area 标签有很好的规范 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

您可以使用 <map><area>。 但它可能不适用于某些设备和浏览器。 然后你可以通过jQuery image map alternative

解决那个问题