Imagemaps: Kleine, aber feine Unterschiede

von Fries Websolutions

Imagemaps kennen wir alle, aber je nachdem wo wir sie verwenden, ob Illustrator, ImageReady oder GoLive, da gibt es kleine, aber feine Unterschiede.

Was ist ein Imagemap?
Ein Imagemap das ist ein Teil eines Bildes, das einen Link, der kann zu einer anderen Datei, einer internen Seite oder einer anderen Homepageführen, beinhaltet. Wir können Imagemaps auch mit Slices vergleichen, die eine rechteckige Zerteilung eines Bildes ermöglichen, aber Imagemap hat den Vorteil, dass eine formlose Abgrenzung zum Rest des Bildes möglich wird. Doch der großenUnterschied zwischen Imagemaps und Slices: bei der Erstellung von Imagemaps, da wird das eigentliche Bild nicht zerteilt.

Eine der bekannteste Verwendung von Imagemaps in Internetseiten, die eine Landkarte beinhalten, das können zum Beispiel Wetterkarten sein, wenn wir auf das Startbild klicken, dann wird eine Landkarte von dem Land eingeblendet. Wenn wir mit der rechten Maustaste auf ein Bundesland klicken, dann können wir die Umrisse des Imagemaps sehen.

Aber Vorsicht! Wir sollten Imagemaps nicht mit Slices kombinieren, aber wir erstellen auch keine Imagemaps innerhalb von Slices, denn bei der Darstellung im Internet können einige URL-Hinweis ignoriert werden!

Erstellung eines Imagemaps in ...
Illustrator: Im Illustrator können wir einzelne Teile einer Grafik extra bearbeiten, wenn wir einem Abschnitt einer Grafik, eine URL zuweisen möchten, dann klicken wir diesen Teil an. Wir können aber auch mehreren Teilen der Grafik die gleiche URL zuweisen, dazu klicken wir alle gewünschten Teile bei gedrückter Umschalt-Taste, um sie alle auszuwählen. Wir müssen noch beachten, dass die "Grafikattribute" auf unserer Arbeitsfläche eingeblendet sind. Sollten wir diese nicht finden können, dann können wir diese unter: > Fenster > Attribute einblenden.

Jetzt w ählen wir unter => Imagemap in der Grafikattribute-Palette Polygon aus und dann klicken wir rund um die ausgewählte Grafik, um diesen Bereich abzugrenzen. Im Feld "URL" können wir den gewünschten Pfad der Zieldatei eingeben..

Wollen wir einen externen Link als Quelle eingeben, dann auf Browser klicken, so können wir die Richtigkeit des Links überprüfen, denn die URL wird in einem Browserfenster angezeigt. Aber nicht vergessen: http:// beim Verweisen auf externe Seiten.

Wenn uns das Ergebnis gefällt, dann speichern wir unser Bild für das Web ab (> Datei > Für Web speichern). Für Illustrationen erscheinen Komprimierungen in .gif- Dateien klarer. Wir wählen als Dateityp Bilder aus und jetzt können wir unser Bild in die gewünschte Seite einbauen.

In GoLive könnten wir nun die bearbeitete Grafik an der gewünschten Stelle einfügen und dort in der Inspektor-Palette die einzelnen Imagemaps der Bilddatei auswählen, um nochmals die URL-Angaben zu kontrollieren und das gewünschtes Ziel eingeben.

Photoshop: Wollen wir im Photoshop Imagemaps erstellen, dann wechseln wir zu ImageReady. Wir bearbeiten dort unsere Imagemaps und speichern dort unsere Grafik für´s Web.

ImageReady: In ImageReady gibt es ein eigenes Tool in der Werkzeugleiste, um unsere abzugrenzenden Bereiche festzulegen.

Wir können das Imagemap-Werkzeug aus der Werkzeugpalette herauslösen, damit wir besser arbeiten können, mit dem Polygonwerkzeug der Imagemap-Werkzeuge wählen wir einzelne Bereiche aus.

Wir achten darauf, dass die Imagemap-Palette auf unserer Arbeitsfläche eingeblendet ist, wenn nicht, dann finden wir diese unter > Fenster > Imagemap einblenden.

Um einem Bild Hotspots zuzuweisen, müssen wir das ganze Bild als einen Bildlink eingeben und wenn wir unter => Weitere im Inspektorenfenster => Imagemap anklicken, dann werden ganz oben im Programmfenster die Zusatzwerkzeuge eingeblendet, die wir für unsere weitere Arbeit benötigen.

Das dritte blaue Werkzeug (Polygon) eignet sich um unförmige Bereiche festzulegen und die Arbeitsweise ist identisch mit dem Polygonlasso von Photoshop. Wenn wir zu einem anderen Werkzeug überwechseln wollen, dann klicken wir auf den kleinen schwarzen Pfeil, damit der bereits fertige Hotspot nicht irrtümlich verändert wird.

Wenn wir den Auswahlpfeil der Imagemap-Palette auswählen und auf die einzelnen Imagemaps klicken, dann können wir diesen verschiedene Links zuweisen. Wir geben in der Inspektor-Palette unter Link wie gewohnt unsere Zieldatei ein. Aber wir dürfen nicht vergessen, wie auch hier in GoLive keinesfalls, ein http:// vor einen externen Link zu setzen!