var ext='.gif';
var curdiv = null; /* div in which is the mouse pointer currently positioned */
var permdiv = null; /* last clicked area corresponding (to be permanently shown) div */
var baseurl = '++resource++ccbi.images/';

function updateArea(el) {
  var name;
  if (el) {
    name = el.href.split('#')[1];
    //alert(name);
  } else {  
    name = null;
  };
  
  var img = document.getElementById('img');
  if (!name) {
     /* mouse pointer is leaving the area */
          
     if (!permdiv) {
        /* mouse was not clicked when was in the area */       
       img.src = baseurl + 'mapa' + ext;
       if (curdiv) {
          curdiv.style.display = 'none';
       };     
     };
     curdiv = null;    
  } else {
     /* mouse pointer is entering the area */
     
     img.src = baseurl + 'mapa-' + name + ext;
     curdiv = document.getElementById(name);     
     if (curdiv) {
        curdiv.style.display = 'block';
     };     
     if (permdiv) {
       if (curdiv != permdiv) {
           permdiv.style.display = 'none';
       };
     };
     permdiv = null;     
  };   
};

function setExt(name) {
  ext = name;
};

function setArea(el) {
  if (curdiv) {
    curdiv.style.display = 'block';
    permdiv = curdiv;
  };
};