HTML - 图像映射：初学者的友好指南

你好，有抱负的网页开发者们！今天，我们将深入HTML图像映射的精彩世界。如果你对这个话题感到陌生，不用担心；我会像多年来在课堂上一样，耐心地引导你完成每一步。让我们一起踏上这段旅程吧！

HTML - Image Map

为什么使用图像映射？

想象一下，你的网站上有一张世界地图的美丽图片，你希望访问者点击不同的国家以了解更多信息。这就是图像映射派上用场的地方！它们允许你在单个图像上创建可点击的区域，将其变成一个交互式元素。

HTML `<map>` 标签

<map> 标签就像是我们交互式区域的容器。在这里我们定义地图的名称，稍后我们将用它来连接图像。

下面是如何操作的：

<map name="worldmap">
<!-- 我们将在这里添加我们的可点击区域 -->
</map>

在这个例子中，我们将地图命名为 "worldmap"。把它想象成给你的地图一个唯一的ID，我们稍后会用到。

HTML `<area>` 标签

现在，让我们来谈谈 <area> 标签。这就是魔法发生的地方！每个 <area> 标签定义了图像映射中的可点击区域。

这里有一个基本结构：

<area shape="shape_type" coords="coordinates" href="link_url" alt="description">

让我们分解一下：

shape：定义可点击区域的形状（rect，circle，或poly）
coords：指定区域的坐标
href：点击区域时跳转的URL
alt：区域的文本描述（对于无障碍访问非常重要）

HTML 图像映射实战

现在，让我们用一个真实的例子来整合所有的内容。想象我们有一张披萨的图片，我们希望每个切片都是可点击的。

<img src="pizza.jpg" alt="美味的披萨" usemap="#pizzamap">

<map name="pizzamap">
<area shape="poly" coords="150,0,97,90,203,90" href="cheese.html" alt="奶酪片">
<area shape="poly" coords="0,90,97,90,48,180" href="pepperoni.html" alt="意大利香肠片">
<area shape="poly" coords="203,90,300,90,252,180" href="mushroom.html" alt="蘑菇片">
<area shape="poly" coords="48,180,148,180,97,90" href="veggie.html" alt="蔬菜片">
<area shape="poly" coords="152,180,252,180,203,90" href="supreme.html" alt="超级片">
</map>

让我们分解一下：

我们有一个 <img> 标签显示我们的披萨图片。
<img> 标签中的 usemap 属性将其连接到名为 "pizzamap" 的地图。
我们定义了名为 "pizzamap" 的 <map>。
每个 <area> 代表披萨的一个切片：

我们使用 shape="poly" 来创建多边形形状（三角形的切片）。
coords 定义了每个三角形的点。
每个切片都链接到关于该类型披萨的不同页面。

形状类型及其坐标

让我们看看你在图像映射中可以使用哪些不同的形状：

形状	坐标	示例
rect	左, 上, 右, 下	`<area shape="rect" coords="0,0,82,126" href="square.html" alt="正方形">`
circle	中心-x, 中心-y, 半径	`<area shape="circle" coords="90,58,3" href="circle.html" alt="圆形">`
poly	x1,y1,x2,y2,...,xn,yn	`<area shape="poly" coords="22,0,66,0,66,44,22,44" href="poly.html" alt="多边形">`