图片热点area，map的用法（H5）

最近在工作中遇到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">

 

具体来说：

①将想要显示的图片，使用HTML标签将其显示在页面中，代码很简单，不做过多解释。但是这里有一个关键的并不常用的属性，那就是usemap，它指定了你要选择的地图，也就是使用哪种地图方式来展示里面的链接。示例代码如下：

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

 ②接下来，定义Map地图，并将Map分块，用以区分不同的内容区域。

     Map地图由<map>标签和<area>标签组成。<map>标签的定义非常简单，只需声明id和name即可，因为不同浏览器识别的标签不一样，所以id和name二者缺一不可。<area>标签因为不常用，下面的图表展示了各个属性所代表的的确切含义。

 

属性	值	描述
coords	坐标值	定义可点击区域（对鼠标敏感的区域）的坐标。
href	URL	定义此区域的目标 URL。
shape	default rect circ poly	定义区域的形状。
target	_blank _parent _self _top	规定在何处打开 href 属性指定的目标 URL。

 

到此为止，我们就可以轻松创建自己的图片地图了。然而，对于如何图片中某个元素的坐标对很多小伙伴来说，仍然是一个难题，因为普通的看图软件根本无法查看每个元素的坐标位置。

 

【确定coords坐标值方法】：

方法一：在Dreamweaver中在图片上添加热区自动生成坐标，这是最快的方法

方法二：把需要添加局部连接的图片放在Photoshop中打开标尺然后放大之后可以看到坐标像素

 

 

 

二、图片自适应浏览器宽度问题

由于页面就是一张图片，所以会出现屏幕宽度不同（浏览器宽度不同）造成的显示不全或横向滚动条问题，比如1920px宽的图显示在1366px宽的浏览器上，就会出现横向滚动条。

 

尝试了几种方案：【正确方法在后面文章http://570109268.iteye.com/admin/blogs/2406185里做了总结】

 

1、将效果图改成div的背景图，对背景图居中显示

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

 虽然达到了适应浏览器宽度的效果，但area标签不支持图片是背景图，所以点击事件失效！

 

2、将图片按浏览器当前宽度指定宽度大小

<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>

 这种情况虽然也能达到效果，但area的坐标值位置都发生改变，点击区域不对了！

 

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

 

.