HTML 图片内链接——Image Map

在 HTML 中，想要实现点击图片的指定区域跳转链接，可以使用 Image Map 实现。这是一个原生的解决方案，兼容性也不错。

下面是一些有用的链接：

• MDN: <map>；
• MDN: <area>；
• Image-Map.net，在线标记坐标生成代码的工具。

代码示例类似于这样（MDN 提供）：

<map name="infographic">
  <area
    shape="poly"
    coords="130,147,200,107,254,219,130,228"
    href="https://developer.mozilla.org/docs/Web/HTML"
    target="_blank"
    alt="HTML" />
  <area
    shape="poly"
    coords="130,147,130,228,6,219,59,107"
    href="https://developer.mozilla.org/docs/Web/CSS"
    target="_blank"
    alt="CSS" />
  <area
    shape="poly"
    coords="130,147,200,107,130,4,59,107"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    target="_blank"
    alt="JavaScript" />
</map>
<img usemap="#infographic" src="/media/examples/mdn-info2.png" alt="MDN infographic" />