[Mapserver-DE] Anzeigen von ToolTips (AJAX)

Fre Jul 8 10:01:38 CEST 2005

Hallo,

das ist eine sehr interessante Sache, vielen Dank für die Infos. AJAX 
ist ja momentan eh' ziemlich hip, siehe google-maps, google-suggest, etc.

DMSolutions fand das wohl auch und hat mit ka-map ein php/ajax-basiertes 
interface für den umn aufgestellt. Auch sehr spannend:

http://ka-map.maptools.org/

Viele Grüße, Michael

Uwe.Daniel at lfp.smul.sachsen.de schrieb:
> 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.
> 
> _______________________________________________
> Mapserver-DE mailing list
> Mapserver-DE at freegis.org
> https://freegis.org/mailman/listinfo/mapserver-de
> 

-- 
-----------------------------------------------------------
Michael Schulz                            mschulz at webgis.de

in medias res  Gesellschaft für Informationstechnologie mbH

In den Weihermatten 66              Tel +49 (0)761 556959-5
79108 Freiburg                      Fax +49 (0)761 556959-6

                www.webgis.de / www.zopecms.de
-----------------------------------------------------------
NEU ++ UMN MapServer Hosting ++ http://www.webgis.de ++ NEU
-----------------------------------------------------------