如何使图像的每个部分可单击

Question

我需要能够将此图像中的每个部分作为单独的链接。如果我将每个部分都设为图像并叠加它们，则意味着与透明背景有一些重叠。

有没有办法使用SVG或区域地图？

Answer 1

您可以使用HTML4和HTML5兼容的<map>代码。

<map>标记用于定义客户端图像映射（具有可点击区域的图像）。

您需要像这样定义地图：

<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>

如您所见，除了矩形和圆形之外，每个形状都可以定义为多边形。

注意：

您可以手动计算坐标（区域左上角的坐标为0,0），或者使用如下工具，使用图形界面计算坐标：

• http://www.maschek.hu/imagemap

Answer 2

是，

您可以映射图片。您可以在此处查看示例：Link