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

Question

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

Answer 1

参见：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>

Answer 2

你要找的是图片图，就是<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> 连接起来，其中 myImageMap 是 map 上的 name：

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

Answer 3

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

Answer 4

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

解决那个问题

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

Image with links in certain areas in HTML 5 for mobile

javascript

image

ionic

regions