如何使图像的每个部分都可点击答案

【问题标题】：How to make each section of an image clickable如何使图像的每个部分都可点击
【发布时间】：2015-05-06 19:46:41
【问题描述】：

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

有没有办法使用 SVG 或区域地图来做到这一点？

【问题讨论】：

demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG
应该能够通过在该区域上创建一个透明的 svg 并向该 svg 添加一个点击事件来做到这一点。

标签： javascript image svg

【解决方案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

【讨论】：

【解决方案2】：

是的，

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

【讨论】：