如何为图⽚添加热点链接？（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 ="xmeibao" target ="_blank" alt="Venus" id="mapArea" />
</map>
</div>
</body>
</html>
  实现效果如下：
    点击图中的链接实现跳转链接对应的⽹站，由于热点链接点击过后默认会有⼀个边框，这⾥我们可以给area元素设置样
式：outline:none即可实现点击后⽆边框
html代码转链接  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" 是图像左上⾓的坐标）。定义三⾓形⾄少需要三组坐标；⾼纬多边形则需要更多数量的顶点。多边形会⾃动封闭，因此在列表的结尾不需要重复第⼀个坐标来闭合整个区域。（由于多边形没使⽤过，此处引⽤的）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。