最近在工作中遇到html标签<map>的使用，记录下（图像地图 / 图像热点 ）<map>的使用过程：

标准定义：

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

通俗理解：

<map>是在图片上面创建热点的标签，所谓图片热点就是给你一张图片然后你可以设置点击图片不同的位置进入不同的链接！

兼容：所有主流浏览器都支持 <map> 标签与<area>标签

场景：

①比如一张图片的静态页！如果你不会切图做静态页，那么就可以用一张效果图来实现！

②<area>标记主要用于图像地图，通过该标记可以在图像地图中设定作用区域（又称为热点），这样当用户的鼠标移到指定的作用区域点击时，会自动链接到预先设定好的页面

③在一些购物网站，我们总能看到一张大图，上面铺满充满诱惑的礼品，当我们轻轻地用鼠标单击一下，就跳转到这个宝贝的页面。以后再也不用去找美工切图，并且也不用为兼容这种浏览器而发愁了。

一、area标签实现图片局部点击事件

原理：在图片上设置链接的area标签，产生图片的局部点击事件效果~

参考例子：

<map name="planetmap" id="planetmap">
    <area
            shape="circle"
            coords="180,139,14"
            href ="http://www.w3school.com.cn/example/html/venus.html"
            target ="_blank"
            alt="Venus" />

    <area
            shape="circle"
            coords="129,161,10"
            href ="http://www.w3school.com.cn/example/html/mercur.html"
            target ="_blank"
            alt="Mercury" />

    <area
            shape="circle"
            coords="-200,200,310"
            href ="http://www.w3school.com.cn/example/html/sun.html"
            target ="_blank"
            alt="Sun" />

</map>
<p>
    <b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），
    所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
</p>

参数说明：

（1）shape：可点击区域形状

  ①rect：矩形

  ②circle：圆形

  ③poligon：多边形

（2）coords：可点击区域坐标

  ①当shape是矩形时，此值是4个坐标值，前两个为坐上坐标（x，y），后两个为右下坐标

  ②当shape是圆形时，此值是3个坐标值，前两个为圆形的坐标，最后一个为半径

  ③当shape是多边形时，coords="x1, y1,x2,y2 ......"，各顶点坐标依次为（X1,y1）、（X2,y2）、（x3,y3） ......。

（3）usemap：使用哪个map的区域点击事件

【注释】：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

【注释】：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性

【注释】：如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。

【实际应用】HTML 图像地图

（1）什么是图像地图?

       把一幅图像分成多个区域，每个区域指向不同的URL地址。例如，将一幅中国地图的图像按照省市划分为若干个区域，这些区域就被称为热点，单击热点区域，就可以连接到与相应的省市有关的页面，这就是图像地图。

（2）怎么制作?

       首先必须定义出图像上的各个热点区域的形状，位置坐标，及其指向的URL地址等信息，这个过程叫图像热点映射。图像热点映射需要使用<map name=mapname></map>标签对进行说明，其中的name属性为该图像热点映射指定了一个名称。

       图像热点映射中的各个区域用<area>标签说明，<area>标签的格式为：<area shape="形状" coords="坐标" href="URL">，href部分也可以用nohref替换，表示在该区域单击鼠标无效。<area>标签还可以有一个target属性，用来指明浏览器在哪个窗口或者帧中显示href属性所指向的网页资源。

       定义好了图像热点之后，接着就要在<img> 图像标签中增加一个名为usemap的属性设置，usemap属性指定该图像被用作图像地图，其设置值为所使用的图像热点映射名称，格式为：在<map>标签中的name属性设置值前多加一个"#"字符。例如，<img src="china.jpg" usemap="#mymap">

具体来说：

<img src="planets.jpg" border="0" usemap="#imgMap" alt="Planets" />

<div style="background:url(/images/abc/1.jpg) top center no-repeat;">

<script type="text/javascript">
   window.onload=function(){
      if (window.innerWidth){
         winWidth = window.innerWidth;
      }else if ((document.body) && (document.body.clientWidth)){
        winWidth = document.body.clientWidth;
       }
      if (document.documentElement && 
           document.documentElement.clientWidth){
            winWidth = document.documentElement.clientWidth; 
       } 
        $("#img1").css("width",winWidth);
    } 
</script>

3、将图片外层div左侧距离固定，求浏览器宽度winWidth同2

var left = (winWidth-1920)/2;//假设图片宽度是1920
$("#div1").css("left",left);
$("#div1").css("position",absolute);

 将左侧多出部分切掉，同时，去掉右侧多出部分（隐藏横向滚动条）

html{
overflow-x:hidden;
  overflow-y:auto;
}

  此方法缺点，如果浏览器不是全屏显示，右侧部分的图片会被切掉，而且没有滚动条，这就是不会切图的程序员写静态页的偷懒方法。所以想省事还是要最好精通PS

.