HTML的map-area的使用

使用背景

在把设置图转成页面的时候，时常会遇到这种状况：一张小图片上有好多个能够点击的小图标，按常规的处理方法是把这一个一个的小图切出来，而后每一个加个a标签进行跳转，可是这样会很是的浪费时间，并且会增长页面图片的数量，拖慢页面的加载速度，因此下面咱们就以这张图片为例，在上面3个小图片上加map跳转。

 

map-area的使用

在img标签有一个usemap的属性，值为map的id或者name，带有map的图片形式：

<img src="abc.jpg" alt="abc" usemap="#myMap">

map和area标签

　　　　 <map name="myMap" id="myMap"><br>　　
            <area shape="rect" coords="75, 0, 336, 148" href="http://www.baidu.com" target="_blank" alt="baidu">
        　　<area shape="rect" coords="370, 0,610, 148" href="http://www.google.com" target="_blank" alt="google">
        </map>

• map有id和name属性，最好把id和name属性都写上，这样有更好的兼容性。
• area的shape属性，为好多的值，其中最经常使用的是rect（矩形）和circ（圆形）
• area的href属性，就是点击要跳转的目标地址
• area的target和alt属性，和<a>属性同样，很少说
• area的coords属性，表示矩形左上角和右下角这两点的坐标，咱们就以上图为例，看下怎么算坐标

 

计算坐标

首先咱们打开photoshop，我用的是photoshop cc，快捷键ctrl+r（mac下为command+r）打开标尺

咱们能够经过红色方框的位置就是咱们须要的2个点，经过标尺线咱们就能够获得对应的坐标（75，0，336，148）。

能过这种方法可以精确的获得坐标，若是要想不是特别精确的取坐标，咱们能够经过QQ的截图工具来取，这里再也不演示了！

 

摘自：http://www.cnblogs.com/sunhk/p/4524395.html