积跬步，聚小流------给图片加锚点

1、常见使用环境

我们先来看一张图片：

在网站的头部的轮番部分，我们经常看到这样的大图，当然这时候我们是给整张图片加的链接，但是如果我们把他放到一个单独页作为一个推广的图片，我们要求只在“了解详情”上加链接，这时我们应当如何来做呢？

记得最开始的时候，我会将“了解详情”部分切下来，然后相对位置，固定位置的放置，实现固然是可以的，但是增加了一张图片的流量啊，哈哈，而且还要外层加div，相对来说比较麻烦。

在w3cshool上记得看到过加图像映射的部分，于是就又回去复习了下。

2、使用方法

<span style="font-size:14px;"><img src="../../Content/images/back_03.png"  alt="推广的背景图片" usemap="#link_part" id="back_tuiguang"/><map id="link_part">   <area shape="rect" coords="300,30,475,100" alt="推广的背景图片" href="javascript:change_back_image(1);" />   <area shape="rect" coords="625,30,800,100" alt="点击有礼的背景图片" href="javascript:change_back_image(2);" /></map></span>

可以看到上面的使用方法，img部分我们正常书写，不过是在后面加了usemap，然后在后方加了相应的map部分，而这在通常被称为热点。

而我们应该关注的重点也是area部分的设定：

1、area其中一个属性shape；

2、用coords和shape配合作为参数，来设定热点大小和形状；

3、href就是相应的链接地址或者说js事件；

area的shape通常有三种情况：circle、rect和poligon，我们来看下coords来如何与之配合的；

* 当shape是circle的时候，coords需要3个值：shape=”circle“，coords=”x,y,z“;

这里x，y决定了圆心的位置(x,y)，以图片的左上角为（0,0），向右为”+“，向下为”+“，反之则为负数，第三个参数则为半径的长度；

* 当shape是rect的时候，coords需要4个值：shape=”rect“，coords=”x1,y1,x2,y2“;

同样以图片左上角为(0,0)，前两个参数x1,y1位四边形一个顶点的坐标，后两个参数x2,y2为第一个顶点对面的坐标

* 当shape是poligon的时候，coords所需要的参数则根据形状和顶点个数来决定:shape="poligon",coords="(x1,y1,x2,y2,x3,y3,...)"

这里每一个坐标都是一个顶点，多边形最后会自动封闭