热区点击和背景图片点击（优先顺序问题）

一张图片不同区域 实现不同点击，但又时候会造成点击区域重叠，这时候可以通过热区点击和div相对定位来实现。

先看下热区点击例子，是按照先后顺序执行的。img是没有z-index属性会按照热区顺序执行下去。比如你的热区被包含在第一个，那么会执行第一个热区动作，然后返回。如果在第二个热区，会执行第二个热区动作，然后返回，依次类推。所以如果想要在一张图片上某个地方执行不同动作，然后除此之外其余图片部分执行其他动作，就要把先执行的放前面热区，最大热区放最后面。例如

<div class="banner">
<img border="0" usemap="#Mapxg" src="./banner.jpg">
<map id="Mapxg" name="Mapxg">
  <area href="http://www.120jt.cn/swt/"  coords="308,239,484,304" shape="rect">
  <area target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1832876730&site=qq&menu=yes"  coords="559,235,719,320" shape="rect">
  <area target="_blank" href="http://www.sina.com.cn"  coords="0,0,980,306" shape="rect">
</map>
</div>

热区没有z-index,之和顺序有关。

在看下div相对定位。这时候就要用到z-index属性，z-index对postion是absolute，relative，fixed生效

<div class="banner">
  <div style="background:url('./swtt.gif') no-repeat;width:420px;height:260px;position:relative;">
    <a style="position:absolute;left:300px;top:183px;width:95px;height:32px;z-index:1000" οnclick="alert('稍后咨询')"></a>
    <a style="position:absolute;top:0px;left:0px;width:420px;height:260px;z-index:33" οnclick="alert('整张图')"></a>
  </div>
</div>

只和z-index有关，和顺序无关。