图片热区🤔

最近在做项目的时候，前辈说到了“图片热区”这个高大上的词儿，听完立马百度了一下，原来这么简单~~~

❤什么是图片热区

1.热区就是在网页上进行了链接的区域。形象点说就是在网页上鼠标箭头变成小手的那个区域。

2.热区是在网页制作时设定的。比如一个版面里面（落地页）表面上看上去是一张整体的图，但是实际上后台用切割的方式切割成一块一块的不同的链接区域，就成为“热区”。

❤热区应用

1.中国地图电子图中的，用热区分割成每一个区域，链接到每一个指定的地方。

2.有一些网页版的密室逃生和寻宝游戏，用的也是这种技术【我猜的🤔O(∩_∩)O哈哈~】

❤热区实现

    <img src="bg.jpg" border="0" usemap="#bgImg" alt="" />
    <map name="bgImg" id="bgImg">
      <area shape="circle" coords="180,139,14" href ="table1.htmll" alt="" />
      <area shape="circle" coords="129,161,10" href ="table2.html" alt="" />
      <area shape="rect" coords="1820,0,1920,100" href ="table3.html" alt="" />
   </map>

    shape="circle" coords="x,y,r" 区域为圆形  后面是圆心坐标和以像素为单位的半径
   shape="rect" coords="x1,y1,x2,y2" 区域为矩形  矩形的左上右下两点的坐标
   shape="poly" coords="x1,y1,x2,y2,x3,y3....区域为多边形  多边形所有顶点的坐标
      以上所有坐标都是相对于图形img左上脚坐标而言的

**<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
其中如果area划分的区域部分交叉则前面的area覆盖后面的area.即第一个area覆盖第二个area。

你瞧，热区就这么简单的💤。以上只是添加简单的跳转事件，如果想做稍微复杂一点的，则添加相应的onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur事件。