Witam wszystkich.
O co mi biega? Chcę dodać do mapowanej grafiki na stronie HTML dwa zdarzenia do jednego obrazka, jedno ma odczytać zawartość bazy XML zawierającej dane z gmin i powiatów jednego województwa, a więc obrazek jest mapą województwa podzieloną na regiony o określonych kształtach.
Drugie zdarzenie:Po kliknięciu regionu(shape'a) ma wyskoczyć informacja z tymi danymi.

Jak oprogramować to w JavaScript, kiedy mam coś takiego?[dwa zagnieżdżone w sobie linki]:

    function hello() {
       alert("tu ma wyskoczyć info z gminy");
     }
...
to będzie w sekcji body:

<area nohref onclick="javascript:document.getelEmentById('gmina')" shape="polygon" coords="" ><a nohref onClick="hello()"><img src="mapa_wojewodztwa.jpg">
</a></a>

Jak widać to są dwa zdarzenia na które ma zareagować obrazek po kliknięciu, tylko nie wiem jak oprogramować funkcję z przechwyceniem i wyświetleniem informacji z danego węzła XML. :-(
Kod mi jest porzebny tylko pod IE.

Znalazłem dwa kody JS odczytujące pliki xml ale nie potrafię ich wykorzystać
pierwszy:

function importXML()
{
    if (document.implementation && document.implementation.createDocument)
    {
        xmlDoc = document.implementation.createDocument("", "", null);
        xmlDoc.onload = createTable;
    }
    else if (window.ActiveXObject)
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.onreadystatechange = function () {
            if (xmlDoc.readyState == 4) createTable()
        };
    }
    else
    {
        alert('Your browser can\'t handle this script');
        return;
    }
    xmlDoc.load("emperors.xml");
}

function createTable()
{
    var x = xmlDoc.getElementsByTagName('emperor');
    var newEl = document.createElement('TABLE');
    newEl.setAttribute('cellPadding',5);
    var tmp = document.createElement('TBODY');
    newEl.appendChild(tmp);
    var row = document.createElement('TR');
    for (j=0;j<x[0].childNodes.length;j++)
    {
        if (x[0].childNodes[j].nodeType != 1) continue;
        var container = document.createElement('TH');
        var theData = document.createTextNode(x[0].childNodes[j].nodeName);
        container.appendChild(theData);
        row.appendChild(container);
    }
    tmp.appendChild(row);
    for (i=0;i<x.length;i++)
    {
        var row = document.createElement('TR');
        for (j=0;j<x[i].childNodes.length;j++)
        {
            if (x[i].childNodes[j].nodeType != 1) continue;
            var container = document.createElement('TD');
            var theData = document.createTextNode(x[i].childNodes[j].firstChild.nodeValue);
            container.appendChild(theData);
            row.appendChild(container);
        }
        tmp.appendChild(row);
    }
    document.getElementById('writeroot').appendChild(newEl);
}

Drugi:

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>Przykładowy skrypt AJAX</title>
<script type = "text/javascript">
var XMLHttp = false;
if (window.XMLHttpRequest) {
XMLHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

function zalacz(co, gdzie)
{
if(XMLHttp) {
XMLHttp.open("GET", "http://regua.biz/"+co);
XMLHttp.onreadystatechange = function()
{
if (XMLHttp.readyState == (1 || 0)) {
document.getElementById('loading').innerHTML = "<p>Ładowanie...</p>";
}
if (XMLHttp.readyState == 4) {
document.getElementById('loading').innerHTML = "";
document.getElementById(gdzie).innerHTML = XMLHttp.responseText;
}
if (XMLHttp.readyState != (1 || 0 || 4)) {
document.getElementById('loading').innerHTML = "";
}
} 
XMLHttp.send(null);
}
} // koniec funkcji zalacz
</script>
</head>
<body>
<h1>AJAX w praktyce</h1>
<form>
<input type = "button" value = "Wyświetl wiadomość z użyciem AJAX"
onclick = "zalacz('wiad.txt',
'wiadomosc')"><br>
<input type="button" value = "Wyświetl wiadomość z użyciem samego JavaScript" onclick="javascript:document.getElementById('wiadomosc').innerHTML = '<p>Ta treść została wyświetlona przez JavaScript.</p>'">
</form>
<div id="wiadomosc">
<p>Tutaj pojawi się wiadomość.</p>
</div>
<div id="loading">
<p><br /></p>
</div>
</body>
</html>

Zastanawiam się też co by mi to dało? Niech ktoś mi podpowie czy to można zrobić w ten sposób.

    function hello() {
      var gmina = GetElementBYId
      alert(gmina);
     }
...
to będzie w sekcji body:

<area nohref onClick="hello()"><img src="mapa_wojewodztwa.jpg" coords="..." shape="polygon">
</a>

No dobra ale jak się chociaż dobrać do innych węzłów jeżeli jest ich 215, za pomocą tego kodu mogę tylko działać na pierwszym i ostatnim węźle?
Ktoś mi pomoże?

<HTML>
  <HEAD>
    <TITLE>
      Określanie wartości elementów z dokumentu XML
    </TITLE>
    <XML ID="firstXML" SRC="greeting.xml"></XML>
    <SCRIPT LANGUAGE="JavaScript">
       function getData()
         {

       xmldoc= document.all("firstXML").XMLDocument;

         wynzeu = xmldoc.documentElement;
        zawartoscWynzua = wynzeu.firstChild;

        alert("Pozdrowienie: " +
                         zawartoscWynzua.firstChild.nodeValue);
         // message.innerHTML=outputMessage;
         }
    </SCRIPT>
  </HEAD>

  <BODY>
    <CENTER>
      <H1>
        Określanie wartości elementu z dokumentu XML
      </H1>
      <DIV ID="message"></DIV>
      <P>
      <INPUT TYPE="BUTTON" VALUE="Pobierz pozdrowienia"
         ONCLICK="getData()">
      </P>
    </CENTER>
  </BODY>
</HTML>

plik xml

<?xml version="1.0" encoding="iso-8859-2"?>
<DOKUMENT>
  <POZDROWIENIA>
    Witaj w XML
  </POZDROWIENIA>
  <KOMUNIKAT>
    Witaj w pokręconym świecie XML.
  </KOMUNIKAT>
</DOKUMENT>

To ma działać na takiej zasadzie tylko że sczytuje dodatkowo plik xml

<html>
<head>
<script language="JavaScript">
function a()
{
aa.style.display = "";
aa.innerText = "tekst po zmianie";
}

function b()
{
aa.style.display = "none";
aa.innerText = "tekst po zmianie po raz drugi";
}
</script>
</head>

<body>
<p><img onmouseover="a();"  onmouseout="b()" src="http://4programmers.net/templates/subMain/gfx/home.gif"> </p>
<div id="aa" style="display: none">tekst</div>
</body>
</html>

OTO ODPOWIEDŹ NA MOJE PYTANIE [Znalazłem ją na http://www.algorytmy.pl]:

Metoda AJAX:
W sekcji body

<body>

<div id="wynik"></div>

<script type="text/javascript">
<!-- <![CDATA[
function czytaj() {
  var xml = null;
  var wynik = document.getElementById("wynik");
  wynik.innerHTML = "Trwa ładowanie danych";

  if (window.XMLHttpRequest) xml = new XMLHttpRequest();
  else if (window.ActiveXObject) xml = new ActiveXObject("Microsoft.XMLHTTP");

  if (xml) {
    xml.onreadystatechange = function() {
      if (xml.readyState==4) {
        var root = xml.responseXML.documentElement;
        wynik.innerHTML = root.getElementsByTagName('pozycja')[0].firstChild.data;
      }
    }
    xml.open("GET", "dane.xml", true);
    xml.send(null);
  }
}
czytaj();
// ]]> -->
</script>

</body>

plik: dane.xml

<?xml version="1.0" encoding="ISO-8859-2" ?>
<root>
  <pozycja id="1">Tekst 1</pozycja>
  <pozycja id="2">Tekst 2</pozycja>
  <pozycja id="3">Tekst 3</pozycja>
  <pozycja id="4">Tekst 4</pozycja>
  <pozycja id="5">Tekst 5</pozycja>
</root>

Działa dla FF[także lokalnie]
dla IE wywala błąd: 'NULL jest pusty lub nie jest obiektem'
Zatrzymuje się na komunikacie
wynik.innerHTML = "Trwa ładowanie danych";
Ogólnie dowiedziałem się że to może być spowodowane zabezpieczeniami IE -obniżyłem poziom na najniższy - nic nie pomogło[możliwe że powoduje to firewall]. Skrypt Działa bez zarzutu dopiero po umieszczeniu go na serwerze !!!
Dlatego warto jest mieć zainstalowanego FF na kompie by sprawdzić czy kod działa.
Ocena serwisu http://www.algorytmy.pl - 6+ na 5 możliwych, za fochowe porady i szybkość obsługi
Polecam!!!

Pozdro dla zainteresowanych