<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