<map>标签:带有可点击区域的图像映射
定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。
效果图:
点击相应蓝色标签可进入详情页面浏览。
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像映射-Map</title>
</head>
<body>
<h1>图像映射示例</h1>
<img src="home.jpg" alt="" width="584px" height="399px" usemap="#homeMap"/>
<map name="homeMap" id="homeMap">
<area shape="circle" coords="160,270,20" href="coach.jpg" alt="沙发" target="_blank"/>
<area shape="circle" coords="250,130,20" href="Painting.jpg" alt="挂画" />
<area shape="circle" coords="160,370,20" href="carpet.jpg" alt="地毯" />
<area shape="circle" coords="510,50,20" href="clapboard.jpg" alt="地毯" />
</map>
</body>
</html>
讲解: