Imagemap

Nachfolgend werde ich zeigen, wie man mit dem Picture Publisher eine Imagemap, also eine Grafik mit anklickbaren Bereichen, erstellt. Es gibt zahlreiche Einsatzgebiete, bei denen der Einsatz einer Imagemap sehr viel Sinn macht. Man denke z.B. nur an einen Landkarte, auf der man durch das Anklicken einer Stadt direkt Informationen über diese erhält. So zahlreich die kreativen Möglichkeiten von Imagemaps auch sind, der unnötige oder übertrieben häufige Einsatz von Imagemaps gilt in Web-Designer-Kreisen als schlechter Stil.

Die nachfolgende Imagemap habe ich mit dem Picture Publisher erstellt. Sie dient als Anschauungs- bzw. Übungsobjekt.



Ausgangspunkt für eine Imagemap ist die Grafik, in der wir die Anklickbereiche festlegen wollen. Beim Picture Publisher werden diese Bereiche nicht durch Zeichenwerkzeuge festgelegt, so wie das z.B. bei vielen anderen Web-Grafik-Tools der Fall ist, sondern durch Objekte. Das bedeutet im Klartext: Wir müssen jeden anklickbaren Bereich mit Hilfe der Maskenwerkzeuge, z.B. der Rechteckmaske oder Freihandmaske, maskieren und dann über den Befehl → Objekt → Objekt von Maske erstellen in ein Objekt verwandeln.

In meinem Beispiel habe ich drei Objekte erstellt, ein »G«, ein »I« und ein »C«. Diese werden selbstverständlich im Objekt-Manager aufgeführt (siehe Abbildung links). Unsere erste Aufgabe wird es sein, dem Picture Publisher mitzuteilen, dass diese Objekte Anklickbereiche innerhalb einer Imagemap werden sollen.

Dazu markieren wir das erste Objekt (im Beispiel "C") und wählen anschließend → Ansicht → Objekteigenschaften. Im Feld »Name« können wir unserem Objekt zunächst einen Namen geben. Dann klicken wir auf den Button »Einfügen« und wählen weiter aus »HTML« und »URL«. Ihr ahnt es sicher: Hier können wir nun die Adresse der Zielseite festlegen, die der Besucher erreicht, wenn er auf den Objekt-Bereich klickt. Diese Adresse füllen wir einfach in die Spalte »Wert« ein.

Anschließend legen wir noch den Alt-Text fest. Dieser erscheint als Tooltipp, wenn der Besucher mit dem Mauszeiger über den Bereich fährt. Normalerweise beinhaltet der Alt-Text eine kurze Beschreibung der Zielseite (z.B. »Zum Hauptmenü« etc.). Wir klicken also wieder den Button »Einfügen«, dazu »HTML« und »ALTTEXT« und geben diesen in der Spalte »Wert« ein.

Damit wäre unser erstes Objekt erledigt. Das gleiche machen wir nun bei den anderen Objekten. Diese erreichen wir übrigens direkt über die Pfeiltasten neben dem Namensfeld. Haben wir dies bei allen Objekten durchgeführt, dann können wir die Objekteigenschaften schließen.

Nun erfolgt die Hauptarbeit. Wir öffnen den Imagemap-Assistenten über → Bearbeiten → Kopieren in HTML. Mit diesem Assistenten erzeugen wir den Imagemap-Code, den wir zum Schluß in den Quellcode der eigenen Seite einfügen müssen.


Das oben abgebildete Menü ist in drei klare Bereiche gegliedert. In Bereich 1 legt man die Eigenschaften der Grafik fest. Die darunter aufgelisteten Bereiche 2 bis 6 beziehen sich auf die Imagemap. Die dort gemachten Angaben wirken sich dann auf den Bereich 7 aus. Der hier erzeugte Code wird bei jeder Eingabe aktualisiert.

Aber nun langsam und immer der Reihe nach. Zunächst stellen wir die Daten unserer Grafik ein, Bereich 1. Beim »Namen und Pfad des Bildes« gibt es aber schon die ersten Probleme, denn der Picture Publisher erwartet, dass man hier den Namen der auf der heimischen Festplatte gespeicherten Datei angibt, sonst kann man nicht testen. Dies ist jedoch Schwachsinn, da sich die Dateien einer Web-Site allesamt auf dem Server befinden. Folglich ist dieser Code dann zwar für den Festplatten-Test gültig, aber nicht für die Server-Datei. Deshalb füllen wir hier gleich den richtigen Pfad und den Namen ein, nämlich den, welchen die Imagemap-Grafik auf dem Server erhalten wird.

In das Feld »Text« füllen wir den Alt-Text der gesamten Imagemap-Grafik. Das Feld »Textausrichtung«gibt an, wie sich die Grafik im Vergleich zum Text verhalten soll, Breite und Höhe können belassen werden, ebenso wie die Angabe zum Rahmen, die standardmäßig auf 0 gesetzt ist.

Bereich 2: Diese Checkbox müssen wir natürlich aktivieren, wenn wir eine Imagemap erstellen.

Bereich 3: Diesen Bereich kreuzen wir an, wenn unsere Grafik auch Objekte enthält, die keinen Anklickbereich darstellen. In diesem Fall markiert man lediglich die Anklickbereich-Objekte im Objekt-Manager und kreuzt dieses Kästchen an. In unserem Beispiel deaktvieren wir es.

Bereich 4: Hier füllen wir die Seiten-Adresse ein, zu der gesprungen werden soll, wenn nicht auf einen Anklickbereich geklickt wird, sondern auf den Rest der Grafik. Dies ist hier aber schlecht gelöst, denn selbst durch das Nichteinfüllen einer Adresse kann nicht verhindert werden, dass im erzeugten Code ein Link für die gesamte Grafik erscheint. Wir können uns also schon einmal darauf einstellen, später den Code ein wenig manuell umzuändern.

Bereich 5: In diesem Feld können wir der Imagemap einen beliebigen Namen geben. Dieser wird benötigt, damit die Koordinaten der Anklickbereiche auch der richtigen Grafik zugewiesen werden können.

Bereich 6: Die Polygon-Toleranz gibt Auskunft darüber,wie genau die einzelnen Anklickbereich durch die Koordinaten beschrieben werden können. Je kleiner der Wert, desto genauer wird ein Bereich eingegrenzt, aber desto umfangreicher ist natürlich auch die Anzahl der Koordinaten und damit die Länge des Quellcode. Ich belasse den Wert auf 3.

Haben wir alles richtig ausgefüllt, dann ist schon der passende Quellcode in Bereich 7 fertig. Wir markieren diesen (so wie wir auch Text in einer Textverarbeitung markieren) und drücken gleichzeitig STRG + C, um diesen Code zu kopieren. Dann fügen wir ihn den Quellcode der Seite ein, welche die Imagemap enthalten soll.

Ich habe bereits angedeutet, dass wir noch manuell am Code nacharbeiten müssen, da der Picture Publisher schlampig arbeitet. Nachfolgend der Code, so wie er bei mir erzeugt wurde:


Die rot markierten Zeilen können wir getrost löschen: Generator, ein Leer-Link und eine Füllzeile.

Um den Bezug zum Imagemap-Assistenten zu zeigen, habe ich die Angaben Blau markiert, die wir in Bereich 1 eingestellt hatten.

Die grünen Zeilen müssen noch ergänzt werden, denn der Picture Publisher nimmt keine Alt-Texte für Anklickbereiche auf, obwohl wir diese extra in den Objekteigenschaften definiert hatten. Schlampig, schlampig.

Die fett-markierten Angaben sicherheitshalber dahingehend überprüfen, ob sie auch für die eigene Site stimmen: Verzeichnis und Name der Grafik und die Sprungziele (Seitenadressen) der Anklickbereiche.

Wer sich ein wenig mit HTML auskennt, der wird sich wundern: Der Picture Publisher kennt nur Polygon-Koordinaten, mit denen man Vielecke beschreibt. Die anderen beiden Formen, Rechtecke (»shape=rect«) und Kreise (»shape=circle«) werden nicht berücksichtigt, da kann ein Kreis noch so rund sein und ein Rechteck noch so rechteckig ...

Damit ist unser Imagemap-Beispiel beendet. Es ist hoffentlich einigermaßen klar geworden, wie man mit dem Picture Publisher Imagemaps erzeugt. Sehr intuitiv ist diese Funktion jedenfalls nicht, und noch dazu fehlerbehaftet ...