好玩的图片映射效果是怎么实现的？
先上代码部分吧
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图片映射</title></head><body><h1>图片映射</h1><hr /><br /><img src="img/1.jpg" usemap="#tupian"/><map name="tupian"><area shape="circle" coords="180,139,14" href="http://www.baidu.com" alt="" title="hello world!" /><area shape="circle" coords="129,161,10" href="http://www.taobao.com" alt="" title="hello world!" /><area shape="rect" coords="0,0,110,260" href="http://www.baidu.com" alt="" title="hello world!" /></map></body>
</html>
解释代码：
- 圆形：shape=“circle”，coords=“x,y,z”
这里的 x 和 y 定义了圆心的位置（“0,0” 是图像左上角的坐标），r 是以像素为单位的圆形半径。 - 多边形：shape=“polygon”，coords=“x1,y1,x2,y2,x3,y3,…”
每一对 “x,y” 坐标都定义了多边形的一个顶点（“0,0” 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。
多边形会自动封闭，所以在列表的结尾不需要重复第一个坐标来闭合整个区域。 - 矩形：shape=“rectangle”，coords=“x1,y1,x2,y2”
第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，“0,0” 是图像左上角的坐标。PS：定义矩形是定义带有四个顶点的多边形的一种简化方法。
一起来看看结果吧！
图片映射还可以运用到很多好玩的地方，虽然在实际生活当中很少会使用area标签，但是我们还是不能忘记它的作用。相信总有一天总会有用武之地的。
