随笔- 137 文章- 0 评论- 34 阅读- 97万

如何为图片添加热点链接？（map + area）

　　所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面。简单来说就是点击某一区域就能跳转到相应的页面，而无需点击整个图片才能跳转。

　　说到图片热点链接，我首先想到了map + area，当然了，可能还有其他方法也能实现。

　　以前只是知道有这个功能，但是具体如何实现却没有去真正的了解。由于工作需要，今天稍微了解了下，发现这个功能其实蛮实用的，尤其是在网页banner广告位中想实现点击指定区域或链接以实现跳转是非常有用的。

　　首先说下map，map的作用是定义一个图像映射。所谓图像映射，是指带有可点击区域的一幅图像。

　　然而光有map是不够的，还需要配合area标签来使用，area元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域，也就是指定的点击区域。

　　说了这么多，还是直接上代码吧：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box{
      width:1024px;
      margin:10px auto;
    }
    img{
      width:1024px;
      height:200px;
    }
    #mapArea{
      outline:none;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="adver_xmb.png" alt="" usemap="#planetmap">
    <map name="planetmap" id="planetmap">
      <area shape="rect" coords="248,45,403,65" href ="http://xmeibao.com" target ="_blank" alt="Venus" id="mapArea" />
    </map>
  </div>
</body>
</html>

　　实现效果如下：

　　　　点击图中的链接实现跳转链接对应的网站，由于热点链接点击过后默认会有一个边框，这里我们可以给area元素设置样式：outline:none即可实现点击后无边框

　　ps:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。shape属性规定了点击区域的形状。而coords 属性则规定区域的 x 和 y 坐标。这两个属性结合起来使用，来规定点击区域的尺寸、形状和位置。

　　shape可取值：circle(圆形)、polygon(多边形)、rect(矩形)

　　shape取值rect，则coords对应的值为x1,y1,x2,y2。第一个坐标表示矩形左上角的坐标，第二个坐标表示矩形右下角的坐标。

　　shape取值circle，则coords对应的值为x,y,r。其中x，y表示圆心的坐标，r则是圆的半径。

　　至于多边形我没使用过，多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."

　　每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。（由于多边形没使用过，此处引用的w3school）