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 Bereiche 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 eine Unterteilung einer Grafik da.

 

Ziel

 

Eine Image Map ist für den User einer Website für die Vereinfachung der Navigation da, um sich besser zurecht zu finden.

 

Einsatzbeispiel:

  • interaktive Landkarten, durch einen Klick wird eine Region aufgerufen
  • Einblendungen in Videos für extra Informationen und Werbung
  • Werbungen, wo unterschiedliche Bereich einer Grafik zu bestimmten Produkt weiterleiten
  • makierte Wörter, die durch  einen Klick eine enthaltene Begriffserklärung anzeigen
  • Eine Bergkarte, wo im Bild Informationen enthalten sind, um welchen Berg es sich handelt

 

 

Vorteile

Nachteile

  • Nutzerführungen innerhalb einer Webseite erleichtern
  • Nutzer kann die Image Maps nicht erkennen/finden
  • Bessere Orientierung
  • Oft zu viele Objekte in einem Bild
  • Leichter Informationen aufnehmen
  • Schnelle Überforderung

 

 

 

 

 

Wichtige Begriffe:

HTML:                           Ist eine textbasierte Auszeichnungssprache zur Strukturierung von elektronischen Dokumenten, wie zum

                                        Beispiel verschieden Texten, Bildern und weiter Inhalte. 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.


      

Grafik 1.png

Grafik 2.pngGrafik 3.png

     

Wie wird ein Image Map erstellt?

1. In Photoshop ein Bild öffnen, was 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 dann 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 einen 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!