15.2. Image Map

In Web sensitive images are frequently used to get some effects when defined areas are enabled by the pointer. Obviously the most used effect is a dynamic link to another web page when one of the sensitive areas is clicked on. This filter allows you to design easily sensitive areas within an image. Applications for website design have this as a standard function. In GIMP, you can do this in a similar way.

15.2.1. Wirkungsweise

Mit diesem Filter können Sie mittels einer leicht bedienbaren grafischen Benutzeroberfläche die klickbaren Bereiche Ihres Bildes festlegen. Diesen Bereichen können Sie dann Aktionen zuordnen. Das Filter erzeugt den dazu notwendige HTML-Code.

Bei diesem Filter handelt es sich um ein sehr komplexes Werkzeug, das an dieser Stelle nicht vollständig erklärt wird (es funktioniert ähnlich zu den Funktionen, die sie in Webseiten-Baukästen finden). Allerdings werden hier einige der wichtigsten Eigenschaften beschrieben. Wenn Sie mehr wissen wollen: Eine gute Einführung in das Thema können Sie im Internet auf der Seite »Grokking the GIMP«[GROKKING02] (auf Englisch) finden.

15.2.2. Activating the Filter

This filter is found in the main menu under FiltersWebImage Map….

Das Fenster des Filters ist recht klein, allerdings können Sie es einfach vergrößern. Die Hauptbestandteile des Fensters sind:

  • die vertikal angeordneten Symbole ganz links, eines für den Zeiger, drei für den Aufruf der Werkzeuge zum Erzeugen der verschieden geformten Bereiche, eines zum Bearbeiten der Zoneneigenschaften, und schlussendlich eines zum Leeren einer ausgewählten Zone. Sie können alle diese Funktionen mit dem Mapping-Menü aufrufen.

  • der Arbeitsbereich rechts, wo Sie alle gewünschten Formen mit den entsprechenden Werkzeugen zeichnen können.

  • die senkrechte Symbolleiste rechts, deren Funktionen offensichtlich sind, aber beim Überfahren mit der Maus durch Minihilfen erläutert werden.

  • zuletzt der Anzeigebereich als Eigenschaftsliste der erzeugten Bereiche. Ein Klick auf einen Listeneintrag wählt automatisch die zugehörige Form im Arbeitsbereich aus.

15.2.3. Eigenschaften

Abbildung 17.407. Image Map filter options

Image Map filter options

Image map window


15.2.3.1. Die Menüleiste

The menu bar is similar to the main menu, only a few menus or menu entries are different:

Datei
Save, Save As

Im Gegensatz zu anderen Filtern erstellt oder modifiziert dieses Filter keine Bilddatei, sondern erzeugt eine Textdatei, die Sie als solche speichern müssen.

[Tipp] Tipp

Mit AnsichtQuelle können Sie sich ansehen, welche Daten geschrieben werden.

Open, Open recent

Mit dem Plugin können Sie die gespeicherte Textdatei auch wieder öffnen. Die dort definierten Bildbereiche werden geladen und auf das aktuelle Bild gelegt. Falls dieses Bild nicht das ursprüngliche Bild ist oder nicht dieselbe Größe hat, werden Sie von GIMP gefragt, ob die Bereichsmaße entsprechend angepasst werden sollen.

Bearbeiten
Bereichsinformationen bearbeiten

Abbildung 17.408. Editing an image map area

Editing an image map area

Hier können Sie alle Eigenschaften der einzelnen klickbaren Bereiche der Imagemap jederzeit ändern. Dieses Dialogfenster öffnet sich auch automatisch, wenn Sie einen neuen Bereich definiert haben.

Ansicht

Spezielle Funktionen für die Imagemap-Bearbeitung sind hier:

Area List

Hiermit können Sie den Anzeigebereich ein- und ausblenden.

Source…

Hier sehen Sie die Daten, wie Sie sie jetzt in eine Datei schreiben würden oder aus einer Datei geladen haben.

Farbe, Gray

Mit diesen Funktionen können Sie den Modus des vom Filter angezeigten Bildes (natürlich nicht den des Originalbildes) ändern und beispielsweise mit dem Bild als Graustufenbild arbeiten.

Mappings

Dieses Menü werden Sie vermutlich selten benutzen, da Sie die Auswahlwerkzeuge leichter über die Bildsymbole links vom Arbeitsbereich erreichen.

Pfeil

Der Pfeil ist hier das Symbol für das Verschieben-Werkzeug. Wenn dieses Werkzeug ausgewählt ist, können Sie einen Bereich im Bild anklicken und verschieben.

Bei einem Polygon können Sie mit diesem Werkzeug noch viel mehr tun: Mit einem Linksklick auf eines der kleinen roten Quadrate eines ausgewählten Polygons können Sie den Eckpunkt verschieben. Ein Rechtsklick auf eines der Quadrate bzw. auf die Verbindungslinie zweier Quadrate öffnet ein Kontextmenü, über das Sie unter anderem den Eckpunkt löschen bzw. einen neuen Eckpunkt einfügen können.

Rectangle, Circle, Polygon

Mit diesen Werkzeugen können Sie im Bild einen klickbaren Bereich in der jeweiligen Form erstellen: Klicken Sie einmal auf das Bild, ziehen Sie den Mauszeiger, bis Ihre Form die gewünschte Größe hat, und klicken Sie dann nochmals.

Edit Map Info…

Abbildung 17.409. Editing the image map data

Editing the image map data

In diesem einfachen Dialogfenster können Sie einige der Daten eingeben, die in die Ausgabedatei geschrieben werden. Autor und Beschreibung fließen lediglich als Kommentare ein, aber Bildname, Titel und Standard-URL werden zu Bestandteilen des <img>- bzw. <area>-Tags des resultierenden HTML-Codefragments.

Werkzeuge

Hinter dem Begriff »Werkzeuge« verbergen sich kleine Hilfsmittel wie Raster (Gitter) und Hilfslinien.

Grid, Grid Settings…

Abbildung 17.410. Rastereinstellungen

Rastereinstellungen

Mit diesen Funktionen können Sie ein Bildraster ein- und ausblenden bzw. dieses Raster konfigurieren.

Use GIMP Guides…, Create Guides…

Hilfslinien werden am Bildrand platziert und können dann nach einem Klick in die rechteckige Fläche durch Ziehen des Mauszeigers verschoben werden. Nach Klicken auf die roten Griffpunkte können Sie die Größe der Rechtecke verändern. Mit Hilfe dieser Hilfslinien lassen sich schnell und einfach aktive Rechtecke im Bild erstellen.

Hilfslinien erstellen

Abbildung 17.411. Hilfslinien-Eigenschaften

Hilfslinien-Eigenschaften

Hilfslinien-Eigenschaften


Statt einzelne geometrische Formen zu verwenden, um aktive Flächen festzulegen, können Sie einen ganzen Satz von Rechtecken verwenden, die jeweils eine aktive Fläche repräsentieren. Wählen Sie dazu WerkzeugeHilfslinien erstellen. In dem Dialogfenster, das sich daraufhin öffnet, legen Sie die Höhe und Breite der Rechtecke, den Abstand dazwischen, Anzahl der Zeilen und Spalten, sowie den Startpunkt (die linke obere Ecke) des Rechteckfeldes fest. Die Abstände werden jeweils in Pixeln angegeben. Wenn Sie mit dem Resultat nicht zufrieden sind, können Sie jedes einzelne Rechteck wie oben beschrieben verschieben und in der Größe korrigieren.

15.2.3.2. Die Werkzeugleiste

Die Werkzeugleiste stellt hauptsächlich einen schnellen Zugriff auf einige wichtige Funktionen bereit, die Sie auch unter den verschiedenen Menüs der Menüleiste finden. Darüber hinaus bietet sie folgende Funktionen:

Move Area to Front, Move Area to Bottom

Here you can move an area entry to the bottom or top of the area list.

15.2.3.3. Der Arbeitsbereich

Abbildung 17.412. Der Arbeitsbereich

Der Arbeitsbereich

In the main area of the image map window, on the left side, you will find your working area where you can draw all the shapes areas you want with the relevant tools.

Links davon befinden sich einige untereinander angeordnete Bildsymbole für die Werkzeuge, mit denen Sie klickbare Bereiche definieren können, eines zum Bearbeiten der Zoneneigenschaften und ein weiteres zum Löschen der ausgewählten Zone. Sie können diese Funktionen auch über das Mapping-Menü aufrufen.

[Achtung] Achtung

Achten Sie darauf, dass sich die Bereiche nicht überschneiden.

15.2.3.4. Der Auswahlbereich

Rechts im Imagemap-Fenster werden die anklickbaren Beiche aufgelistet. Ein Klick auf einen Eintrag wählt die entsprechende Form im Arbeitsbereich aus, wo Sie sie dann bearbeiten können.

Neben der Anzeige befindet sich eine vertikale Symbolleiste. Deren Funktionen sind offensichtlich, aber werden beim Überfahren mit der Maus durch Minihilfen erläutert.

Die Pfeilsymbole zum Hoch- und Runterschieben der Listeneinträge funktionieren an dieser Stelle leider nicht. Da Sie aber die Bereiche natürlich so wählen, dass sie sich nicht überschneiden, benötigen Sie diese Funktionen letztlich nicht.