Html superposition deux images une zone réact

Bonjour,

je voudrais savoir coment faire pour superposer une zone réactive a deux images superposées.
pour le moment j'ai mes images superposées comme il faut mais la zone réactive semble etre située entre les deux niveaux de Z.

mon code actuel est le suivant :

<div id="Layer1" style="position:absolute; left:99px; top:132px; width:119px; height:132px; z-index:1"><img src="SMscout.gif" alt="" name="yyy" width="625" height="625" border="0" usemap="#yyyMap">
<map name="yyyMap" id="yyyMap">  
  <area shape="rect" coords="0,0,35,35" href="#" />
<area shape="rect" coords="35,0,70,35" href="#" />
</map>
<span style="position:absolute; left:10px; top:10px; width:15px; height:15px; z-index:2"><img name="yyy" src="c6.gif" width="15" height="15" alt="" /></span>
<span style="position:absolute; left:45px; top:10px; width:15px; height:15px; z-index:2"><img name="yyy" src="c6.gif" width="15" height="15" alt="" /></span>
<span style="position:absolute; left:80px; top:10px; width:15px; height:15px; z-index:2"><img name="yyy" src="c6.gif" width="15" height="15" alt="" /></span></div>

lorsque je passe ma souris sur l'image au niveau Z1 la zone réactive réagit, mais lorsque je passe la souris sur l'image de niveau Z2, elle ne réagit pas :/