<map> 和 <area> 标签在 HTML 中用于定义图像映射。图像映射是一种在图像上定义多个热点（区域）的技术，每个热点可以是一个矩形、圆或者多边形，并且每个热点都可以链接到不同的 URL 或者执行不同的操作。
下面是关于这两个标签的详细说明和示例：
<map> 标签
<map> 标签用于定义图像映射。它包含一个或多个 <area> 标签，每个 <area> 标签定义图像上的一个热点区域。
属性
name: 图像映射的名称，用于与<img>标签的usemap属性关联。
<area> 标签
<area> 标签定义图像映射中的一个热点区域。
属性
shape: 热点区域的形状，可以是default、rect、circle或poly。coords: 热点区域的坐标。根据shape的不同，坐标的格式也不同。rect:x1, y1, x2, y2（左上角和右下角的坐标）circle:x, y, radius（圆心的坐标和半径）poly:x1, y1, x2, y2, ..., xn, yn（多边形的顶点坐标）
href: 点击热点时链接到的 URL。alt: 热点区域的替代文本，用于图像无法显示时或者屏幕阅读器。
示例
下面是一个简单的示例，展示如何使用 <map> 和 <area> 标签创建一个图像映射：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图像映射示例</title>
</head>
<body>
<img src="example.jpg" alt="示例图像" usemap="#image-map">
<map name="image-map">
<area shape="rect" coords="34,44,270,350" href="https://www.example.com/rect" alt="矩形区域">
<area shape="circle" coords="588,300,38" href="https://www.example.com/circle" alt="圆形区域">
<area shape="poly" coords="140,121,181,96,204,121,187,160,140,160" href="https://www.example.com/poly" alt="多边形区域">
</map>
</body>
</html>
在这个示例中：
<img>标签的usemap属性指定了图像映射的名称#image-map。<map>标签的name属性与<img>标签的usemap属性相匹配。<area>标签定义了三个不同的热点区域：一个矩形、一个圆形和一个多边形，每个热点区域都链接到不同的 URL。
前端工程师、程序员
浙公网安备 33010602011771号