使用HTML的<map>、<area>，实现点击图片不同区域跳转不同页面，可以点击的区域用不同颜色覆盖出来

在HTML中，`<map>` 和 `<area>` 标签可以一起使用来实现图像热点链接（也称为图像热区）。通过这种方式，你可以将一张图片划分为多个区域，并为每个区域指定一个URL，当用户点击图片上特定的颜色区域时，浏览器会自动导航到相应的链接。

1. 首先，创建一个`<map>`标签，并给它一个唯一的id，如`myMap`：

<img src="image.jpg" usemap="#myMap">
<map name="myMap">

2. 接着，添加多个`<area>`标签，每个代表一个可点击的区域。它们有以下几个重要属性：
- `shape`：定义了区域的形状，例如`rect`（矩形）、`circle`（圆形）或`poly`（多边形），对应CSS shape-inside属性。
- `coords`：定义了区域的具体坐标，格式通常是`top, right, bottom, left` 或 `x1, y1, x2, y2`（对于矩形）。
- `href`或`target`：分别为链接地址和打开新窗口（若设置`_blank`）。

<area shape="rect" coords="0,0,100,100" href="page1.html">
<area shape="circle" coords="150,150,40" href="page2.html">
<!-- 更复杂的多边形区域 -->
<area shape="poly" coords="200,200,210,210,220,200,210,190" href="page3.html">

3. 最后，记得关闭`<map>`和`</area>`标签，并结束`<img>`标签。

当你预览网页时，点击图片的不同区域，浏览器就会按照你设定的链接跳转到相应页面。