Was ist eigentlich eine Image Map? Wissen Sie es? Wenn Sie dieses Thema interessiert, dann sind Sie hier richtig. Im Folgenden wird erklärt, was eine Image Map ist, welche Ziele diese hat und in welchen Bereichen sie eingesetzt wird. Außerdem wird durch Beispiele erläutert, wo sie am meisten genutzt wird. Darauffolgend werden die Vor- und Nachtteile einer Image Map geschildert und wichtige Schlüsselbergriffe erklärt. Zum Schluss gibt es eine Anleitung für die Erstellung einer eigenen Image Map mit einer App wie zum Beispiel:"Photoshop".
Um oben genannte Fragen zu beantworten, müssen wir erstmal den Begriff: "Image Map" klären.
Was ist eine Imagemap (dt. verweissensitive Grafik)?
Definition
Eine Image Map ist eine zusätzliche Fläche in einer Grafik, die zu etwas Bestimmtem führt - zu einer internen oder auch externen Plattform - oder sie enthält bestimmte Informationen auf derselben Seite. Image Maps sind für die Unterteilung einer Grafik da.
Ziel
Eine Image Map ist für den User einer Website zur Vereinfachung der Navigation da. Also um sich besser zurecht zu finden.
Einsatzbeispiele:
- interaktive Landkarten: durch einen Klick wird eine Region aufgerufen
- Einblendungen in Videos für extra Informationen und Werbung
- Werbungen, wo unterschiedliche Bereiche einer Grafik zu bestimmten Produkt weiterleiten
- makierte Wörter, die durch einen Klick eine enthaltene Begriffserklärung anzeigen
- Eine Bergkarte, die innerhalb des Bildes weitere Informationen enthält, um welchen Berg es sich handelt
|
Vorteile |
Nachteile |
|
|
|
|
|
|
Wichtige Begriffe, die häufig in Verbindung mit ImageMaps auftauchen:
HTML:
Ist eine textbasierte Auszeichnungssprache zur Strukturierung von elektronischen Dokumenten, wie zum Beispiel verschiedenen Texten, Bildern und weiteren Inhalten. Sogenannte HTML-Dokumente, die im Webbrowser dargestellt werden, sind die Grundlage für das heutige World Wide Web.
JavaScript:
Ist eine der wichtigsten Programmiersprachen im Webbrowser
CSS:
Ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML und JavaScript eine der Kernsprachen des World Wide Web. Sie ist für die äußere Form einer Website verantwortlich.
Wie wird ein Image Map erstellt?
1. In Photoshop das Bild öffnen, welches eine Imagemap werden soll. Mit dem „Slice“-Tool dann den gewünschten Bereich markieren und auswählen.
2. Durch Klicken und ziehen mit dem Slice-Werkzeug einen Begrenzungsrahmen ziehen, um einen Teil des Bildes, der später anklickbar sein soll, festzulegen. Photoshop zeichnet automatisch weitere Slice-Bereiche, sodass jeder Abschnitt eine Slice hat.
3. Durch Klicken mit der rechten Maustaste in einen Slice Bereich und Wählen der Option „Slice-Option bearbeiten“, kann man eine URL bestimmen und diese einer Slice zuordnen oder der Slice einen Namen geben und dann mit OK bestätigen.
4. Durch Ziehen der Maus können auch noch weiter Slice-Tools erstellt werden.
5. Änderungen können mit dem „Slice-Auswahlwerkzeug" vorgenommen werden.
Bildkarte speichern
1. „Datei“ dann „Für Web speichern“, um das „Für Web speichern“ Fenster zu öffnen.
2. Weiter auf „Present“ und eine der folgenden Optionen auswählen: GIF 128 Dithered, JPEG High oder PNG-24.
3. Dann über „Speichern“ in einer Datei oder einem Ordner der Festplatte (wo sie die Imagemap-Datei speichern möchten) ablegen und einen Namen vergeben.
4. Klicken Sie dann das Dropdown-Menü „Format“ und dann „HTML und Bilder“ um das Projekt zu speichern.
Schon haben Sie eine eigene Imagemap erstellt, die Sie einer Website hinzufügen können.
Haben Sie noch Fragen zu diesem Thema? Oder möchten Sie selbst eine Webseite mit einer eigenen Image Map erstellen? Dann kontaktieren Sie uns gerne!
