Código javascript
:
Ver original<script type="text/javascript">
var info = new Array();
info["info1"] = "HTML info1";
info["info2"] = "HTML info2";
info["infotext"] = "HTML infotext";
function initMap(){
var d = document, m = d.getElementsByName("Mapa")[0],
o = m.getElementsByTagName("area"), h, i, w = function(){
h = this.href.split("#")[1];
if(typeof h != "undefined" && h != "") d.getElementById("descr").innerHTML = info[h]
}; for(i = 0; i< o.length; i++) o[i].onmouseover = w
}
window.onload = initMap
</script>
Código HTML:
<img src="http://www.ncdesign.org/html/mapimg.gif" usemap="#Mapa">
<map name="Mapa">
<area shape="poly" href="#info1" coords="100,100,180,80,200,140" />
<area shape="circle" href="#info2" coords="80,100,60" />
<area shape="rect" href="#infotext" coords="140,20,280,60" />
</map>
<div id="descr">Descripción</div>