Onmouse over en una imagen cambie otra imagen distinta

[Askaris]

Buenas, tengo algunas dudas sobre que un mouseover o hipervínculo en una imagen produzca cambios en otra imagen distinta.

Mi idea, en líneas generales, es poner la imagen de un mapa con distintos puntos señalados, y que cuando pases el puntero por encima de uno de ellos o que hagas click en él cambie la imagen (imagen, cuadro de texto,capa,etc) inmediatamente inferior.

Así, por ejemplo si ponemos el puntero encima o hacemos click en Valencia te aparezca debajo una imagen o capa con varias líneas sobre Valencia.

Supongo que se entiende lo que intento, aunque la verdad es que no sé muy bien cómo hacerlo, por si se os ocurre algo.

Gracias por la ayuda!

[America|UNK]

Código javascript:

<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>