Anker in einer Image-Map
Michae
- html
0 Sven (κ)
Hallo Zusammen,
ich erstelle gerade eine Seite, welche nur einen Stadtplan enthält.
Über eine Image-Map erstelle ich zahlreiche Hotspots, welche auf Detailinformationen (z.B. von Sehenswürdigkeiten verweisen). Die Map sieht im html z.B. so aus:
<img src="map.jpg" width="3764" height="2572" usemap="#Map" border="0">
<map name="Map">
<area shape="circle" coords="758,1048,26" title="Kirche" href="kirche.htm" target="_blank" onclick="return popup(this.href);">
<area shape="circle" coords="1425,532,25" title="Bahnhof" href="bahnhof.htm" target="_blank" onclick="return popup(this.href);">
</map>
Über die onclick-Eigenschaft generiere ich ein Popup-Fenster mit den entsprechenden Informationen.
So weit - so gut.
Nun zu meiner Frage:
Kann ich von einer weiteren Seite auf die Punkte referenzieren?
Also einen Anker in einer Imagemap...
Nach dem Motto "Wo ist die Kirche?", d. h. der User klickt auf den Text und der Browser springt auf die Seite mit der Karte und zentriert den Hotspot...
Ich hoffe, ich habe mich verständlich ausgedrückt und danke für Eure Hilfe!
Justin
Hallo Michae,
<area shape="circle" coords="758,1048,26" title="Kirche" href="kirche.htm" target="_blank" onclick="return popup(this.href);">
Über die onclick-Eigenschaft generiere ich ein Popup-Fenster mit den entsprechenden Informationen.
Kann ich von einer weiteren Seite auf die Punkte referenzieren?
Nach dem Motto "Wo ist die Kirche?", d. h. der User klickt auf den Text und der Browser springt auf die Seite mit der Karte und zentriert den Hotspot...
Naja, was passiert denn da genau? Das "Popup-Fenster" ist eine kleine Box, die du genau am Mauszeiger positionierst? Oder ein "wirkliches" Fenster (window.open)?
Jedenfalls lässt sich das schon realisieren. Zum Beispiel wie folgt:
<a href="stadtplan.htm?wo=kirche">Ich will sofort sehen, wo die Kirche ist</a>
und auf stadtplan.htm
<body onLoad="checkQuery();">
die Funktion checkQuery() beschäftigt sich nun damit, den Querystring (das ist der Text "?wo=kirche") auseinanderzunehmen (der kann natürlich auch ein anderes Schema haben, klar. Also z.B. nur "?kirche" oder ähnliches), schaut dann nach einem area-Element mit der id "kirche" (wir haben vorher allen areas die passenden ids verpasst) und ruft popup(document.getElementById("kirche").href); auf :-)
Dann müsste man sich natürlich noch um die passenden Koordinaten kümmern, damit die Box an der richtigen Position erscheint. Am Einfachsten geht das aber alles eh mit einer großen Array-Daten-Sammlung.
Im Fazit bleibt zu sagen: Es gibt prinzipiell viele Wege, deinen Wunsch zu lösen. Ich habe dir einen Ansatz gegeben - schau dir doch einfach mal in SELFHTML die passenden Methoden, die du dazu brauchst, an (z.B. das window.location-Objekt, etc., etc.) und probier mal etwas zusammenzuschreiben. Wenn es nicht geht - hier kannst du ja immer fragen :)
Gruß,
Sven