Imagemaps: Kleine, aber feine Unterschiede

von Christina Taupe
Imagemaps kennt jeder. Doch je nachdem, ob Illustrator, ImageReady oder GoLive verwendet werden, gibt es kleine, aber feine Unterschiede.
Was ist ein Imagemap?
Ein Imagemap ist ein Teil eines Bildes, das einen Link (etwa zu einer anderen Datei, einer internen Seite oder einer anderen Homepage) beinhaltet. Man kann Imagemaps auch mit Slices vergleichen, die eine rechteckige Zerteilung eines Bildes ermöglichen. Ein Imagemap hat den Vorteil, dass eine formlose Abgrenzung zum Rest des Bildes ermöglicht wird.

URL´s sind hinter der Masche, der Nase und beiden Ohren versteckt

Zum großen Unterschied zwischen Imagemaps und Slices: Bei der Erstellung von Imagemaps wird das eigentliche Bild nicht zerteilt.
Die wohl bekannteste Verwendung von Imagemaps kennen Sie von Internetseiten, die eine Landkarte beinhalten (etwa http://www.wetter.at). Wenn Sie dort auf das Startbild klicken, wird die Landkarte von Österreich eingeblendet. Klicken Sie einmal mit der rechten Maustaste auf ein Bundesland. Dann können Sie die Umrisse des Imagemaps sehen.
Vorsicht! Kombinieren Sie Imagemaps nicht mit Slices beziehungsweise erstellen Sie keine Imagemaps innerhalb von Slices. Bei der Darstellung im Internet könnte der ein oder andere URL-Hinweis ignoriert werden!
Erstellung eines Imagemaps in …
Illustrator: In Illustrator können die einzelnen Teile einer Grafik extra bearbeitet werden. Wenn Sie also einem Abschnitt einer Grafik eine URL zuweisen möchten, klicken Sie diesen Teil an. Es kann natürlich auch mehreren Teilen der Grafik die gleiche URL zugewiesen werden. Klicken Sie hierfür alle gewünschten Teile bei gedrückter Umschalt-Taste, um sie gemeinsam auszuwählen.
Nun achten Sie darauf, dass die „Grafikattribute“ auf Ihrer Arbeitsfläche eingeblendet sind. Wenn Sie diese nicht finden können, können Sie diese unter > Fenster > Attribute einblenden.

Beiden Maschenhälften wurden dieselbe URL zugewiesen
Wählen Sie nun unter => Imagemap in der Grafikattribute-Palette Polygon aus und klicken Sie sich rund um die ausgewählte Grafik, um den Bereich abzugrenzen. Im Feld „URL“ können Sie den gewünschten Pfad der Zieldatei angeben.
Wenn Sie einen externen Link als Quelle angeben und auf Browser klicken, können Sie die Richtigkeit des Links überprüfen. Es wird nämlich die URL in einem Browserfenster angezeigt. Vergessen Sie allerdings das http:// beim Verweisen auf externe Seiten nicht!
Wenn Ihnen das Ergebnis gefällt, speichern Sie Ihr Bild zu guter Letzt für das Web ab (> Datei > Für Web speichern). Für Illustrationen wirken Komprimierungen in .gif- Dateien klarer. Ob Sie sich nun für ein GIF oder ein JPEG entscheiden, bleibt Ihnen überlassen. Beide Möglichkeiten funktionieren. Als Dateityp brauchen Sie lediglich Bilder auszuwählen. Jetzt können Sie Ihr Bild in die gewünschte Seite einbauen.
In GoLive könnten Sie anschließend 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 deren gewünschtes Ziel anzugeben.
Photoshop: Um in Photoshop Imagemaps zu erstellen, wechseln Sie am besten zu ImageReady. Bearbeiten Sie dort Ihre Imagemaps und speichern Sie – wie gewohnt – dort Ihre Grafik für´s Web.
ImageReady: In ImageReady gibt es ein eigenes Tool in der Werkzeugleiste, um Ihre abzugrenzenden Bereiche festzulegen.

Imagemap-Werkzeuge
Sie können das Imagemap-Werkzeug aus der Werkzeugpalette herauslösen, um besser damit zu arbeiten. Mit dem Polygonwerkzeug der Imagemap-Werkzeuge wählen Sie, wie vom Polygon-Auswahllasso gewohnt, einzelne Bereiche aus.

Imagemaps in ImageReady
Achten Sie nun darauf, dass die Imagemap-Palette auf Ihrer Arbeitsfläche eingeblendet ist. Ansonsten finden Sie diese unter > Fenster > Imagemap einblenden.

Imagemap-Palette
Wie Sie in der obigen Abbildung sehen, können Sie jedem Imagemap seine individuelle Einstellung verpassen.
GoLive: In GoLive werden so genannte Hotspots über die Grafik gelegt.

Hotspots in GoLive
Um einem Bild Hotspots zuzuweisen, müssen Sie zuerst das ganze Bild als einen Bildlink angeben. Wenn Sie unter => Weitere im Inspektorenfenster => Imagemap anklicken, werden ganz oben im Programmfenster die Zusatzwerkzeuge eingeblendet, die Sie für Ihre weitere Arbeit benötigen.

Imagemap aktivieren

Werkzeuge zur Festlegung der Hotspots
Das dritte blaue Werkzeug (Polygon) eignet sich am besten, um unförmige Bereiche festzulegen. Die Arbeitsweise ist identisch mit dem Polygonlasso von Photoshop. Wollen Sie zu einem anderen Werkzeug überwechseln, klicken Sie zuerst auf den kleinen schwarzen Pfeil, damit der bereits fertige Hotspot nicht irrtümlich verändert wird.
Wenn Sie den Auswahlpfeil der Imagemap-Palette auswählen und auf die einzelnen Imagemaps klicken, können Sie ihnen verschiedene Links zuweisen. Geben Sie in der Inspektor-Palette unter Link wie gewohnt Ihre Zieldatei ein. Vergessen Sie auch hier in GoLive keinesfalls, ein http:// vor einen externen Link zu setzen! Wir wünschen Ihnen weiterhin viel Spaß beim Ausprobieren.