Eine weitere Möglichkeit für einen Leser, Kontakt aufzunehmen, ist: Einfach mal vorbei zu schauen.
Das ist Sinn und Zweck einer Webseite, auf der sich ein Verein oder ein Geschäft darstellt. Ein Messeveranstalter z.B. wird nicht nur eine Anfahrtsskizze, sondern auch einen Überblick über die räumliche Aufteilung des Gebäudes bereitstellen. Für eine Anfahrt kann man einen Routenplaner einbinden. Im Internet gibt es verschiedene Routenplaner, die man kostenlos verwenden darf. Lese bitte die Nutzungsbedingungen (Lizenz) - bevor du eine Karte oder einen Routenplaner einbindest.
Grundsätzlich unterliegen Stadtpläne dem Urheberrecht. Verlage verstehen da keinen Spaß. Du solltest also einen Straßenplan nur als Grundlage für einen eigenen Plan verwenden. Also maximal die Richtungen der Straßen nachzeichnen, aber den Rest der Karte solltest du selber gestalten.
Auf einer Grafik kannst du Bereiche anklickbar gestalten. Diese Funktion nennt man Imagemap. Im HTML-Text werden über die Koordinaten auf dem Bild die Flächen markiert, die einen anklickbaren Bereich bilden. Dieser Bereich wird dann mit einem Link hinterlegt, der z.B. auf eine Webseite führt.
Die Schwierigkeit beim Erstellen einer Imagemap ist die genaue Angabe der Koordinaten.
So sieht es im Quelltext aus:
Code: Alles auswählen
<img src="landkarte.png" width="435" height="360" border="0" alt="Landkarte" usemap="#map">
<map name="Landkarte">
<area <area shape="circle" coords="198,87,8"
href="grunes-eck.html" alt="Grünes Eck" title="gruenes-eck">
</map>
Code: Alles auswählen
<img src="landkarte.png" width="435" height="360" border="0" alt="Landkarte" usemap="#map">Mit der Angabe usemap="#map" legst du fest, dass die Karte mit dem Namen "map" als Imagemap verwendet werden soll. Der Name muss als Anker definiert sein. Füge also eine Raute vor dem Namen ein.
Der Name selber darf nur aus alphanumerischen Zeichen bestehen, also keine Leerzeichen. Als Sonderzeichen dürfen nur Minus "-", Unterstrich "_", Punkt "." oder Doppelpunkt ":" verwendet werden.
Code: Alles auswählen
<map name="Landkarte">Mit </map> beendest du die Imagemap.
Code: Alles auswählen
<area shape="circle" coords="198,87,8"... shape="circle"... umschreibt die Form des Bereiches. Es können Rechtecke (rect), Kreise (circle) und unregelmäßige (poly) Formen verwendet werden.
... coords=""... beschreibt die Koordinaten der Fläche.
Die Koordinaten werden unterschiedlich definiert. Bei einem Rechteck besteht die Angabe aus 4 Zahlen:
- Ein Rechteck(shape="rect") definierst du mit den Koordinaten für x1,y1,x2,y2
wobei bedeuten:
x1 = linke obere Ecke, Pixel von links
y1 = linke obere Ecke, Pixel von oben
x2 = rechte untere Ecke, Pixel von links
y2 = rechte untere Ecke, Pixel von oben - Einen Kreis (shape="circle") definierst du mit den Koordinaten für x,y,r
wobei bedeuten:
x = Mittelpunkt, Pixel von links
y = Mittelpunkt, Pixel von oben
r = Radius in Pixel - Ein Polygon (shape="poly") definierst du mit den Koordinaten x1,y1,x2,y2 ... x,y
wobei bedeuten:
x = Pixel einer Ecke von links
y = Pixel einer Ecke von oben
Du kannst so viele Ecken definieren, wie du möchtest. Von der letzten definierten Ecke musst du dir eine Linie zur ersten definierten Ecke hinzudenken, die das Polygon wieder schließt.
Es ist recht schwierig, diese Koordinaten genau einzustellen. Einfacher geht so etwas mit einem Grafikprogramm, wie z.B. Gimp.
Übung
[col]Öffne die wegbeschreibung.html mit KompoZer und füge eine Überschrift ein. Ändere auch den Titel über Format - Seitentitel und -einstellungen. Speichere und schließe die Seite mit KompoZer.
Als Imagemap kann eine Landkarte, ein Lageplan oder eine andere Grafik verwendet werden. Verschiebe sie in den Ordner "bilder".|
Klicke auf das Bild für die Darstellung in Originalgröße[/col]
Anschließend öffnest du sie mit Gimp. Wähle im Menü [b]Filter - Web - ImageMap[/b]. Der ImageMap-Assistent öffnet sich. An der linken Seite des Assistenten findest du die Formen, mit denen du eine klickbare Fläche erzeugen kannst. Klicke darauf, um die jeweilige Form zu aktivieren. Markiere den Bereich im Bild und doppelklicke hinein, um die Markierung festzulegen.
[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion19-2.png[/popup]
Möchtest du eine E-Mail schreiben, wird das mailto: vorangestellt. Bei einer HTML-Seite, die innerhalb deines Webs hinterlegt ist, wählst du die Datei über den Dateimanager (kleiner Ordner) aus.
Zu jeder Option kannst du einen Verknüpfungstypen anklicken. Gimp trägt die notwendigen Zeichen automatisch ein. Der ALT-Text muss in jedem Fall mit ausgefüllt werden. Wähle einen kurzen Begriff für das Ziel. Die Koordinaten werden automatisch im Register der Form eingetragen:
[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion19-3.png[/popup]
[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion19-4.png[/popup]
Hast du deine Bereiche festgelegt und die Pfade eingetragen, zu denen die Fläche beim Anklicken navigieren soll, speicherst du die Map als beispiel.map in das gleiche Verzeichnis wie das Bild.
[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion19-5.png[/popup]
<img src="beispiel.png" width="500" height="400" border="0" usemap="#map" />
Code: Alles auswählen
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Anke Lange -->
<area shape="poly" coords="44,214,41,259,75,297,96,301,111,273,122,267,119,237,160,
223,120,186" alt="www.kompozer-web.de" href="http://www.kompozer-web.de" />
<area shape="circle" coords="370,307,61" alt="Wilber" href="images/gimp.png" />
</map>Öffne die wegbeschreibung.html mit einem Texteditor. Setze den Cursor hinter <div id="inhalt">.
Füge den Inhalt aus der Zwischenablage hier ein. Speichere und schließe die HTML-Datei. Prüfe noch einmal, ob die Links alle richtig sind. Bei einem relativen Link, der auf eine Datei innerhalb des gleichen Webs verweist, darf kein http:// voranstehen.
Dein Ergebnis könnte so aussehen: die Imagemap
Für Hobbys, die an keinen geografischen Ort gebunden sind, kann man z.B. einen Screenshot mit anklickbaren Bereichen erstellen. Die Bereiche können dann zu weiteren Informationen führen.
Fertig ist dein Lageplan...
, mal schauen was kommt, ich freu mich 
