✔ Dynamische Karteninfos

[LoMo]

Hi,

ich zeige eine Karte (z.b. BRD) auf den Bildschirm, die in image maps geteilt ist (Links). Wenn er jetzt über ein Land fährt soll er sich die nötigen Infos aus einer Datenbank hohlen und Sie in ein kleinen Fenster anzeigen. Wie z.B. hier klick mich bloss mit Punkten gemacht statt wie bei mir mit ganzen Ländern.

Wie kann ich das realisieren ? Ist es irgendwie möglich das ich mir mittels php die Daten aus der Datenbank hohl und mit javascript dann nur das Fenster anzeige beim mouseover ? Wie mache ich so einen "speziellen" mouseover ? php kann ich ziemlich gut bei javascript siehts jedoch nicht so gut aus.

mfg Lomo

 

[LoMo]

Ok wie man den tooltip macht weiss ich jetzt aber wie bekomme ich beim mousover den Namen des Landes (bzw. Links) herraus ? Und wie übergeb ich diesen Wert an eine php Funktion ?

mfg Lomo

 

[apathy]

Normale html Imagemaps funktionieren ja mit Shapes. du kannst in die Datenbank einfach die Koordinaten der Shapes, evtl shape Type (dann musst du unter umständen mehrere Tabellen erstellen, da verschiedene Shape-Formen versch. Koordinaten benötigen) und eben jene Beschreibung/Ländername.

Bei der image map selbst hast du ja folgende Tags:

<AREA SHAPE="" HREF="" COORDS="" ALT="">

"SHAPE" bezeichnet die Form. Circle, Rect oder Polygon.

"HREF" den Link den du damit öffnen willst. Solls nen Popup sein, schreibst du einfach ne funktion die du bei href aufrufst. Möchtest du ne php Variable im link übergeben schreibst die einfach rein mit echo.

"COORDS" sind die Koordinaten.
Bei "Circle"gibts 3 Koordinaten: Mittelpunkt (pixel von links), Mittelpunkt(pixel von oben), Radius. In eben jener Reihenfolge.
Bei "rect" Linke obere Ecke, Pixel von links, linke obere Ecke, Pixel von oben, rechte untere Ecke, Pixel von links,
rechte untere Ecke, Pixel von oben
Bei "poly" gibst du soviele Punkte ein wie du willst. Jeweils Pixel von links & oben. Die letzte Koordinate wird autom. mit der ersten verbunden.

"ALT" bezeichnet eben jenes Tooltip. Dort kannst du ja auch ne PHP Variable reinhauen.

<AREA SHAPE="circle" HREF="javascript:funktion(<?php echo $variable; ?>)" COORDS="10,10,50,50" ALT="<?php echo $variable; ?>">

 

[LoMo]

Erstmal danke für die schnelle Antwort

Bei mir is des a bissi schwieriger ich post mal meinen Code

<script>
<!--
wmtt = null;

document.onmousemove = updateWMTT;

function updateWMTT(e) 
{
	x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
	y = (document.all) ? window.event.y + document.body.scrollTop  : e.pageY;
	if (wmtt != null) 
	{
		wmtt.style.left = (x + 20) + "px";
		wmtt.style.top 	= (y + 20) + "px";
	}
}

function showWMTT(id) 
{
	wmtt = document.getElementById(id);
	wmtt.style.display = "block"
}

function hideWMTT() 
{
	wmtt.style.display = "none";
}
//-->
</script>

<div class="tooltip" id="1">
	<? 	
		$land = // HIER KOMMT DAS LAND HER
		$datensaetze = // HIER KOMMT ANZAHL DATENSÄTZE		echo '<table><tr><td>
			  <table align="center" border="1" cellpadding="0" cellspacing="0" width="100%" bordercolor=\"#000000\"><tr><td>'.$land.'</td></tr></table>
		  	  <table><tr><td>Es sind '.$datensaetze.' Datensätze vorhanden</td></tr></table>
			  </td></tr></table>'; 
	?>
</div>

Wenn ich über einen Link fahre dann führe ich showWMTT(id) aus, die sich den Tooltiptext aus den div hohlt. In der div muss ich auf die Datenbank zugreifen aber das ist nicht das Problem, das Problem ist wie übergebe ich das Land an den div ?

Oder weiss jemand vielleicht sogar ne andere Lösung es zu machen ? Ist es möglich mit javascript auf eine Datenbank zuzugreifen ?

mfg lomo

 

[Quaese]

Hi,

wieviele Karten sind es denn?

Falls es sich nur um eine Karte handelt:
Wenn die Karte geladen wird, sind ja die Länder darauf bekannt. Diese kannst du bereits vorher
aus der Datenbank abfragen und daraus ein assoziatives JavaScript-Array erstellen. Als Indizes erhält
es die IDs der Datansätze und kann somit darüber angesprochen werden.
Weiterhin enthält ein Datensatz zu einem Land die Koordinaten sowie den Shapetyp. Dann ist
es dir auch möglich, die Imagemap mit den zugehörigen areas dynamisch aufzubauen (mit PHP).

Handelt es sich um mehr Karten, ist die Variante sicherlich schwierig umzusetzen, da die
Koordinaten der jeweiligen Länder sicherlich auf den unterschiedlichen Karten verschieden
sind.

Willst du tatsächlich erst beim Überfahren eines Landes die Datenbank abfragen, könntest
du einen versteckten iFrame einbinden. In diesem rufst du ein entsprechendes Dokument auf,
das die Datenbankabfrage ausführt und anschliessend das Hauptdokument mit den erforderlichen
Informationen versorgt.

Zu beiden Varianten habe ich Lösungsansätze in den Anhang gepackt.

Ciao
Quaese

 

[LoMo]

@Quaese: Das ist genau das wo ich suche. Vielen Dank vorallem für die Beispiele