[Mapserver-DE] Anzeigen von ToolTips (AJAX)

Don Jul 7 17:04:24 CEST 2005

hallo liste,

Anzeigen von ToolTips, welche am mauszeiger ausgerichtet sind - ohne die Seite neu zu laden?
Diese frage beschäftigte mich und ich stieß schnell an die grenzen von JavaScript.
JS bietet die möglichkeit bilder vorauszuladen. Bei normalen Webseiten text/html oder text/text findet sich allerdings keine möglichkeit dies in eine JS variable hineinzuladen.

Die einzigste möglichkeit ist, einen versteckten frame mit einer neuen URL zu aktualisieren.
Wenn man dann schließlich den toolTip-Text in den versteckten frame geladen hat muss man ihn umständlich mittels JS wieder herausschneiden und weiterverarbeiten.

Da mir der weg über versteckte iframes nicht gefiel fragte ich nach einer suche im listenarchiv bei Andreas Koeberle nach. Dieser machte mich auf AJAX aufmerksam (siehe quellen).

diese technologie ermöglicht es, das client und server miteinander kommunizieren ohne das dabei die komplette seite neu geladen werden muss.
ein eindrucksvolles beispiel findet man bei google suggest http://www.google.com/webhp?complete=1&hl=en welches den vorteil dieser technologie sehr gut nutzt.

es folgt ein beispiel, welches die verwendung dieser technologie zum anzeigen von toltips zeigt:

--- index.html ---
<html>
....
<script>
var xmlhttp=false;	//für tooltip requests

function init()
{
	//erstelle das xmlhttpobjekt (browserspezifisch)
	try 
	{
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch (e)
	{
		try
		{
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (E) 
		{
			xmlhttp = false;
		}
	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') 
	{
		xmlhttp = new XMLHttpRequest();
	}
	//an dieser stelle ist das objekt xmlhttp erstellt und man kann damit arbeiten
}

/*
diese funktion zeigt den tooltip an. und wird bei einem onmousemove über der karte oder nach einer vorgeschalteten verzögerungsfunktion aufgerufen
*/
function showtooltip()
{
	if(xmlhttp)	//wenn das objekt bereits von onload - init() erstellt wurde
	{
		var link = ....	//generiere einen link, welcher den tooltip-text erzeugt (im einfachstem fall getfeatureinfo zur aktuellen mausposition)
		xmlhttp.open("GET", link,true);	//stelle anfrage an den server

		xmlhttp.onreadystatechange=
		function() 
		{
			if (xmlhttp.readyState==4) 
			{
				var tooltiptext = xmlhttp.responseText;	//speichere antwort in variable
				if(tooltiptext != "")	//wenn die antwort nicht leer ist oder fehler oder sonstwas damit nicht in ordnung ist (z.b. fehlermeldung des getfeatureinfo aufrufes)
				{
					//positionierung und füllen des tooltips
					document.getElementById("toolinfo").firstChild.nodeValue = tooltiptext;
					window.document.all.toolinfo.style.visibility = "visible";
					window.document.all.toolinfo.style.top = currentPos.SY + 20;
					window.document.all.toolinfo.style.left = currentPos.SX + 10;
				}
			}
		}
		xmlhttp.send(null);
	}
	else	//tooltip nicht anzeigen
	{
		window.document.all.toolinfo.style.visibility = "hidden";
	}
}
</script>
....
<img src="kartenlink" alt="karte" onmousemove="showtooltip();" />
<p id="toolinfo" style="position: absolute; top: 0px; left: 0px;"></p>
</html>

-------------------------------------------------------------------------------------------------------------------

oben stehendes stellt einen vereinfachten ablauf dar. Allerdings ist noch folgendes zu beachten:
bei einem mousemove über einem bild funktioniert die sache gut.

wenn die maus aber das bild verlässt bleibt der tooltip stehen.
	also entweder einen timer - und tooltip nach n sekunden ausblenden
	oder der einfachheit wegen mousemove im body und - hidde tooltip

im wiki (quelle) finden sich alle links die man für die technologie braucht.

meiner meinung nach eine gute technologie, um eine ganze menge von Webseiten-Nachteilen aus dem weg zu räumen.

so: viel spaß beim toolTip erstellen.

mfg Uwe

quellen:
http://de.wikipedia.org/wiki/AJAX

Uwe Daniel
LFP 5.3
tel: 035022/542377
e-mail: uwe.daniel at lfp.smul.sachsen.de

Kein Zugang für elektronisch signierte sowie für verschlüsselte elektronische Dokumente.