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