Infobulle css dans image reactive

Bonjour
J'utilise une infobulle css

[code]a.info {
  position:relative;
  border-bottom:1px dashed #808080; 
  text-decoration: none; 
  font-weight: bold;
}
a:hover.info {
  text-decoration: none; 
  background: none;
}
a.info span {display: none;}
a:hover.info span {
  display: inline; 
  position: absolute;  
  top:1.5em; 
  left:0.5em; 
  z-index: 20; 
  background: #446D87; 
  color: #fff; 
  border:1px solid #000; 
  width:150px; 
  text-align:center;
  font-weight:normal;
  font-size: 10px;
  line-height:12px;
  padding:2px 4px;
}

puis
[/code]

<a href="#" class="info">texte<span>définition 

Comment puis je utiliser une image réactive avec cette infobulle ? Merci

exemple :

<div class="logolien">
<img src="logos/logolien.gif" border="0" usemap="#Map">
<map name="Map" id="Map">
  <area shape="rect" coords="5,5,83,72" href="http://www.ac-amiens.fr/" onclick="window.open(this.href); return false; ">
  <area shape="rect" coords="92,6,166,73" href="http://www.ac-amiens.fr/inspections/60/" onclick="window.open(this.href); return false;">
</map>
</div>

je n'arrive pas à inclure les balises CLASS et SPAN dans AREA !!

Quelqu'un a t'il une idée ? Merci