www.gemeinde-michendorf.de - Die private Webseite für die Ortsteilen Michendorf, Wildenbruch, Langerwisch, Wilhelmshorst, Fresdorf und Stücken
So wirds gemacht
1. Script
2. Script
3. Script
4. Script
nach unten
So 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:
<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:
<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
){kind=link}
){kind=link}
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:
){kind=link}
){kind=link}
<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:
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!
){kind=link}
){kind=link}
Jetzt sollten Sie ihre Seiten mit den einzelnen Browsern und Auflösungen überprüfen! Viel Glück!!