<map> 标签是 HTML5 中用于创建图像映射(image map)的标签。图像映射允许你在图像上定义可点击的区域,每个区域可以链接到不同的目标。<map> 标签通常与 <area> 标签一起使用。以下是 <map> 和 <area> 标签的基本结构:
<img src="image.jpg" alt="Description of the image" usemap="#imageMap">
<map name="imageMap">
  <area shape="rect" coords="0,0,50,50" href="link1.html" alt="Area 1">
  <area shape="circle" coords="100,100,50" href="link2.html" alt="Area 2">
  <area shape="poly" coords="200,0,250,50,200,100" href="link3.html" alt="Area 3">
</map>

在这个例子中:

  •  <img> 标签用于显示图像,并通过 usemap 属性指定图像映射的名称(在这里是 #imageMap)。

  •  <map> 标签创建一个图像映射,并通过 name 属性指定映射的名称。

  •  <area> 标签定义图像上的可点击区域,每个区域使用 shape 属性指定形状("rect" 表示矩形,"circle" 表示圆形,"poly" 表示多边形),coords 属性指定区域的坐标,href 属性指定链接目标,以及可选的 alt 属性提供替代文本。


这个例子创建了一个图像映射,其中包含三个可点击区域,每个区域点击后链接到不同的页面。你可以根据需要调整 <area> 标签的属性来定义不同形状和位置的区域。图像映射通常用于创建交互性更强的图像链接。


转载请注明出处:http://www.zyzy.cn/article/detail/3745/HTML5