function initMap() {
  var _map = document.getElementById("map");
  if (_map) {
    createMap(_map);
  }
}

function createMap(_map) {
  //region list
  var _region = document.getElementById("regions").getElementsByTagName("li");
  //map areas
  var _areas = _map.getElementsByTagName("area");
  for (i = 0; i < _areas.length; i ++) {
    if (_areas[i].alt) {
      var _reg = document.getElementById(_areas[i].alt);
      if (_reg) {
        _areas[i]._reg = _reg;
        _areas[i].onmouseover = function() {
          if (this._reg.className.indexOf("active") == -1)
          {
            this._reg.className += " active";
          }
          for(k = 0; k < _region.length; k++)
          {
            if (_region[k].className.indexOf(this.alt) != -1)
            {
              var _link = _region[k].getElementsByTagName("a").item(0);
              _link.className += " active";

            }
          }
        }
        _areas[i].onmouseout = function() {
          this._reg.className = this._reg.className.replace("active", "");
          var _region = document.getElementById("regions").getElementsByTagName("li");
          for(k = 0; k < _region.length; k++)
          {
            (_region[k].className.indexOf(this.alt) == -1)
            {
              var _link = _region[k].getElementsByTagName("a").item(0);
              _link.className = _link.className.replace("active", "");
            }
          }
        }
      }
    }
  }
  for(i=0; i<_region.length; i++)
  {
    _region[i]._reg = document.getElementById(_region[i].className);
    _region[i].onmouseover = function()
    {
      this._reg.className += " active";
    }
    _region[i].onmouseout = function()
    {
      this._reg.className = _reg.className.replace("active", "");
    }
  }
}
if (window.addEventListener){
  window.addEventListener("load", initMap, false);
}
else if (window.attachEvent){
  window.attachEvent("onload", initMap);
}