[英]How to make each section of an image clickable
I need to be able to make each section in this image a separate link. 我需要能够使该图像中的每个部分成为单独的链接。 If I make each section an image and overlay them it means that there is some overlap with the transparent background. 如果我将每个部分制作成图像并将其覆盖,则意味着与透明背景有些重叠。
Is there a way to do this using SVGs or area maps? 有没有办法使用SVG或区域地图来做到这一点?
You can use the HTML4 and HTML5 compatible <map>
tag. 您可以使用HTML4和HTML5兼容的<map>
标记。
The <map>
tag is used to define a client-side image-map (an image with clickable areas). <map>
标签用于定义客户端图像映射(具有可单击区域的图像)。
You'll need to define the map like this: 您需要像这样定义地图:
<img src="menu.gif" alt="roundMenu" usemap="#roundMenu">
<map id="roundMenu" name="roundMenu">
<area shape="poly" alt="" title="" coords="200,584,360,412,692,204,980,128,1176,128,1148,512,972,524,680,644,540,820,360,692,268,628" href="" target="" />
<area shape="poly" alt="" title="" coords="1192,40,1152,440,1384,500,1580,632,1696,804,2036,652,1876,380,1540,140,1364,72" href="" target="" />
<area shape="poly" alt="" title="" coords="2112,620,1728,796,1772,792,1832,1060,1800,1280,1704,1456,1784,1484,2044,1644,2168,1368,2212,1100,2184,812" href="" target="" />
<area shape="poly" alt="" title="" coords="1160,1756,1120,2152,1344,2148,1704,2040,1976,1860,2108,1684,1752,1464,1760,1504,1536,1700,1296,1776,1172,1764" href="" target="" />
<area shape="poly" alt="" title="" coords="604,1460,716,1632,944,1796,1116,1832,1124,2224,1016,2224,664,2088,384,1856,256,1644,440,1548" href="" target="" />
<area shape="poly" alt="" title="" coords="196,1672,540,1492,460,1260,500,996,592,812,572,832,264,624,104,968,80,1260,132,1512,136,1516" href="" target="" />
</map>
As you can see, in addition to rectangle and circle, each shape can be defined as a polygon. 如您所见,除了矩形和圆形之外,每个形状都可以定义为多边形。
NOTE: 注意:
You can calculate the coordinates manually (the coordinates of the top-left corner of an area are 0,0), or use a tool such as the following, that calculates the coordinates using a graphical interface: 您可以手动计算坐标(区域的左上角的坐标为0,0),或使用如下工具通过图形界面来计算坐标:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.