map标签做图像映射
先贴代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>map标签实现图片映射</title>
</head>
<body>
<img src="fortoone.jpg" alt="4合1" usemap="fortoone">
<!-- 这里同时使用id和name指定相同的值,是因为不同的浏览器对其支持不同,为了兼容性设置两个属性 -->
<map name="fortoone" id="fortoone">
<!-- coords属性指定形状,常用的有rect(矩形)、circle(圆形),herf表示点击之后转到的路径
a、矩形需要指定左上角和右下角坐标
b、圆形需要指定圆心和半径
c、多边形需要依次指定多个顶点的坐标
-->
<area shape="rect" coords="0,0,248,248" href="atmsmoke.jpg">
<area shape="rect" coords="248,0,497,248" href="ddmsmoke.jpg">
<area shape="circle" coords="124,372,124" href="mfsnsmoke.jpg">
<area shape="circle" coords="372,372,124" href="rzsgsmoke.jpg">
</map>
</body>
</html>