Titelbild
www.gemeinde-michendorf.de - Die private Webseite für die Ortsteilen Michendorf, Wildenbruch, Langerwisch, Wilhelmshorst, Fresdorf und Stücken
Standort: >>> Home >>> Neues >>> Sonstiges >>> Webkartographie >>> Vergrößerung mit JS
Info: 1 Die Funktion sowie die Bildanzeige der Erläuterung arbeiten mit JavaScript! Sollten Sie JavaScript deaktiviert haben, weshalb auch immer, können die Funktionen in ihrem Browser nicht angezeigt werden!
Info: 2 Sollten Sie in ihrem Browser Pop-up-Fenster geblockt haben, funktioniert das Ganze ebenfalls nicht. Deshalb sollte immer auch ein onClick mit eingesetzt werden. Klickt der Nutzer auf einen Bereich öffnet sich das Fenster.
 

Webkartographie

 
Vergrößerungen   Erläuterung
     
Anzeigen eines ver-
großerten Ausschnittes
in einem sich öffnenden
Fenstern durch ein
onmouseover
blindgif

Prinzip:

Von einer Karte wird ein Miniaturbild (~ 150 x 150 Pixel) hergestellt z.B. mit Adobe Photoshop. Durch ein überrollen mit der Maus werden sensitive Flächen berührt, die ein Fenster mit einen Teil der Karte (im Originalmaßstab - Vergrößerung) öffnen. Durch das Verlassen der Fläche mit der Maus wird das Fenster wieder geschlossen. Durch ein Anklicken einer sensitiven Fläche wird ein neues Browserfenster geöffnet, das über einen JavaScript: history.back() zurück zur Ausgangsseite führt. Die sich öffnenden Fenster können über die Parameter "top" und "left" genau positioniert werden. Um ein schnelles Laden der Bilder im Web zu gewährleisten, werden die Bilder über ein JavaScript im Hintergrund vorausgeladen.

Problemlage und deren Lösung

Wenn das sensitive Bild unter dem sich öffnenden Fenster befindet, entsteht ein Flackern des sich öffnenden Fensters. Umgangen wird das Problem mit einer gezielten Platzierung das Sensitiven Bildes und des sich öffnenden Fensters. Also unter mehreren Bildschirmauflösungen die Seite Testen!

 
Gehen Sie mit der Maus auf ein Teil des Bildes um diesen Teil zu vergrößern
 
Minibild Teil 9 Teil 8 Teil 7 Teil 6 Teil 5 Teil 4 Teil 3 Teil 2 Teil 1

unten So wirds gemacht
unten 1. Script
unten 2. Script
unten 3. Script
unten 4. Script
unten nach unten

nachobenSo wird's gemacht ab: Macromedia/Adobe DreamWeaver 4 und etwas Handarbeit

Stellen sie ein Miniaturbild der Ausgangskarte her. Die Größe sollte 150 x 150 Pixel nicht überschreiten. Das Miniaturbild für das Web optimieren, Dateinamen vergeben und im Bildordner abspeichern. Das Originalbild in die gewünschten Teile (in Photoshop) zerschneiden und einzeln für das Web optimieren, anschließend im Bilderordner ablegen. Jetzt können Sie für jedes Bild eine Webseite erstellen, das ist nötig weil der Netscape Browser 4.7 sich öffnende Fenster mit Graphiken nicht darstellt. Bei X/HTML Seiten die Graphiken enthalten gibt es keine Schwierigkeiten. Um den Kartenausschnitt platzsparend in der Webseite zu positionieren kann über ein Cascading Style Sheets (CSS) der Kartenausschnitt positioniert werden:

nachoben <style type="text/css">
<!--
/*<![CDATA[*/
.position00 {
position:absolute;
top:0px;
left:0px;
}
/*]]>*/
-->
</style>

.position00 ist hier ein selbst vergebener Klassennamen für das"DIV" Element zur Plazierung des Bildes. Im BODY-Teil wird nur das Bild plaziert und der Link "zurück" (über JavaScript) gesetzt:

nachoben <body>
<div class="position00"> <img src="bildordner/dateinamen.jpg" alt=" ">
<a href="javascript:history.back()">z u r ü c k</a></div>
</body>

Bsp.: mit Position top:0px,left:0px und ohne Positionierung

Nun muß die eigentliche Steuerungsseite hergestellt werden. Gehen Sie auf "Datei / Neu" und speichern Sie die Seite in Ihren Ordner. Fügen Sie das Miniaturbild über die Objektpalette ein. Wählen Sie des Bild in der Entwurfsansicht aus und tragen Sie in die Eigenschaftspalette einen Namen für die "map" ein. Anschließend das Rechteckwerkzeug auswählen und einen "Hotspotbereich" in der Karte (Bild) aufziehen. Jetzt Hyperlink (die sich öffnende X/HTML-Datei), "ALT-Element" Text eintragen. Ist Ihre Datei eine XHTML-Strict-Datei - kein Fensterziel eintragen! Wechseln Sie in die Codeansicht und tragen Sie diesen JavaScript in den HEAD-Teil ein:

nachoben <script type=" javascript">
<!--
//<![CDATA[
function fensterauf(adresse)
{
info=window.open(adresse,"Info","toolbar=no,location=no,
directories=no,status=no, menubar=no,scrollbars=no,resizable=yes,copyhistory=no,
left=292,top=20,width=500,height=455") return true;
}
function fensterzu()
{
info.close()
return true;
}
//]]>
-->
</script>

Über diesen JavaScript öffnen und schließen sich die Fenster mit den einzelnen Vergrößerungen (X/HTML-Dateien mit den Kartenteilen), über" left" "und "top" wird die Position des sich öffnenden Fensters gesteuert, über "width" und "height" die Größe des Fensters - setzt in diesem Fall voraus, dass die Bilder alle die gleiche Pixelgröße haben bzw. die Fenstergröße nicht kleiner ist als das größte Bild. In Dreamweaver sind jetzt alle Befehle und Koordinaten der Hotspots eingetragen, es fehlen nur noch die ausführenden Anweisungen zum öffnen und schließen der Fenster. Jetzt ist wieder Handarbeit nötig. Gehen Sie in die Codeansicht und tragen Sie in die entsprechenden Links folgende Quelltext ein:

nachoben onmouseover="fensterauf('1871_1.htm')" onmouseout="fensterzu()" onclick="fensterauf('1871_1.htm')"

Die Komplette Zeile muß nun wie hier aussehen:

<area shape="rect" coords="0,0,49,44"
href="1871_1.htm" onmouseover="fensterauf('1871_1.htm')"
onmouseout="fensterzu()" onclick="fensterauf('1871_1.htm')"
alt="Teil 1" title="Teil 1" />

Die Event-Handler "onmouseover" und "onclick" öffnen jeweils die Fenster, "onnouseout" schließt beim Verlassen der Links mit der Maus die Fenster.
Nun muß nur noch dafür gesorgt werden, dass sich die Bilder (Vergrößerungen) schnell am Bildschirm erscheinen, ohne lange Wartezeiten für den Nutzer. Dazu gehen Sie in den BODY-Element und öffnen die VerhaltensPalette, klicken Sie auf das + Zeichen in der VerhaltensPalette und wählen Sie "Bilder vorausladen". In dem sich öffnenden Menü wählen Sie die entsprechenden Bilder aus, mit dem + Button in der VerhaltensPalette werden Bilder zugefügt, mit OK bestätigen. Die entsprechenden JavaScripte werden automatisch von DreamWeaver in den Quelltext eingefügt!

Jetzt sollten Sie ihre Seiten mit den einzelnen Browsern und Auflösungen überprüfen! Viel Glück!!

nachoben nach oben

Standort: >>> Home >>> Neues >>> Sonstiges >>> Webkartographie >>> Vergrößerung mit JS
© Holger Kielblock 1999 - 2017, www.gemeinde-michendorf.de ist eine privat betriebene und finanzierte Webseite