9.2 Verweissensitive Grafiken

Ein bekanntes grafisches Mittel im Web sind verweissensitive Grafiken. Eine verweissensitive Grafik hat mehrere Hyperlinks und vielleicht Java-Skripte, die mit einem einzelnen Bildteil verbunden sind. Ein solches Bild gestattet dem Webdesigner Links und dynamischen Aktionen mit grafischen Hinweisen zu verbinden.

Zum Beispiel könnte die Verwendung einer verweissensitive Grafik für eine Reisebüro, das Pauschalreisen zu verschienden exotischen Zielen rund um die Welt anbietet, sein. Es könnte eine verweissensitive Grafik aus einer Weltkarte konstruiert werden, die Hyperlinks zu den Orten enthält, die beim Klicken mit der Maus auf die Karte zu den Orten verweisen. Zum Beispiel könnte das Anklicken von Frankreich den Nutzer zu einer anderen Webseite mit Details über Pauschalangebote, Orte, die man gesehen haben muss, Übernachtunggelegenheiten und Restaurant für den Besuch von Paris verweisen. Klicken auf Venezuela würde den Anwender mit Seiten bezüglich Caracas verbinden usw.

Verweissensitive Grafiken sind im Web sehr nützliche Hilfsmittel, weil sie ein anderes, grafisches Mittel der Navigation zu anderen Seiten verkörpern. Ein Problem ist jedoch, dass sie schwer zu konstruieren sind. Für jeden Hyperlinke muss ein Bereich in einem Bild bestimmt werden, der den Link aktiviert, wenn mit der Maus auf ihn geklickt wird. Dieser Bereich wird als Polygon definiert, das als eine Menge von Koordinatenpaaren, die die Stellen der Polygonecken verkörpern, bestimmt wird. Die Schwierigkeit rührt aus der Bestimmung der Koordinatenwerte her. Bei einer verweissensitiven Grafik, die viele Hyperlinks enthält die mit komplizierten Bereichen verknüpft sind, kann die Zuweisung der Punkte ziemlich mühsam sein.

Glücklicherweise erlaubt Ihnen der ImageMap-Plugin im Bild:Filter/Web-Menu die Ecken der Polygonbereich durch direktes Zeichnen im Bild einzugeben. Der Plugin gestattet auch einfach, Hyperlinks und Java-Skripte den Bereichen zuzuweisen. Der Plugin schreibt am Ende eine HTML-Datei, welche die neu erzeugte verweissensitive Grafik darstellt. Alle Positionsinformationen über Ecken der Grafikbereiche sind in diese Datei zusammen mit den den Bereichen zugeordneten Hyperlinks und den Bezügen zu Java-Skripten geschrieben.

Die erste Beschreibung, wie der ImageMap-Plugin funktioniert, beruht auf einem leeren Bild, das in Abbildung 9.13(a) gezeigt wird.

  

Abbildung 9.13: Der ImageMap-Plugin

Eine leeres Bild ist als ein praktisches Beispiel für eine verweissensitive Grafik nicht schrecklich nützlich, ist aber hervorragend geeignet darzustellen, wie der ImageMap-Plugin funktioniert. Abbildung 9.13(b) stellt den ImageMap-Dialog dar, der hauptsächlich aus drei Bereichen besteht. Es gibt die 'Malleinwand', in der das Bild, das als verweissensitive Grafik dient, erzeugt wird. Weil das Bild in Abbildung 9.13(a) leer ist, zeigt der Leinwandbereich einen weissen Hintergrund. Links von der 'Malleinwand' ist die Werkzeugleiste, die die Selektions- und Bearbeitungsfunktionsicons enthält. Diese werden verwendet, um die Umrisse der Bereiche des Bilds zu zeichnen, die anklickbare Zonen werden sollten. Schliesslich gibt es die Bereichsliste, die rechts vom 'Malleinwand'-Bereich liegt. Diese wird zum anordnen und bearbeiten der Liste der gezeichneten Bereiche verwendet.

Die ImageMap-Selektionswerkzeuge werden zum Bestimmen der anklickbaren Bereiche verwendet. Die Selektionswerkzeuge sind rechteckig, kreisförmig und polygonal. Von den Dreien ist das Polygonwerkzeug das Allgemeinste, weil es die komplexesten Formen zu selektieren erlaubt. Abbildung 9.14(a)

  

Abbildung 9.14: Selektion eines polygonalen Bereichs

stellt eine unregelmässige Form dar, die mit dem Polygonselektionswerkzeug gemacht wurde. Die Form wird durch Klicken mit dem Polygonselektionswerkzeugbutton und anschliessendem Klicken auf Punkte im Malleinwand-Bereich erzeugt. Jeder Punkt wird eine neue Ecke des Polygons. Die Selektion wird beendet und das Polygon ist ganz bestimmt, wenn mit der linken Maustaste doppelgeklickt wird.

Sobald ein Bereich wie das Polygon in Abbildung 9.14(a) definiert wurde, erscheint der Einstellungen-Dialog, wie in Abbildung 9.14(b) gezeigt. Dieser wird genutzt um den dem Bereich zugeordneten Hyperlink zu bestimmen. Wie Sie im Dialog sehen können, kann jeder gültige Weblink eingegeben werden. In diesem Beispiel wurde der Text http://www.gimp.org als Link eingegeben. Zusätzlich wurde zur Information Text im Kommentarfeld unten im Dialog eingegeben. Der Einstellungen-Dialog gestattet, das Polygon zu bearbeiten und Java Skripte dem ausgewählten Bereich zuzuweisen. Auf diese Funktionalitäten kann durch Anklicken der relevanten Reiter, die im Dialog gezeigt werden, zugegriffen werden.

Abbildung 9.15(a)

  

Abbildung 9.15: Verwalten der ausgewählten Bereiche

zeigt den ImageMap-Dialog, nachdem mehrere Bereiche ausgewählt wurden. Die drei Bereiche werden in der Bereichsliste gezeigt und der Aktive wird blau markiert. Die Bearbeitungswerkzeuge können zum Ändern jedes Bereichs der Bereichsliste verwendet werden. Sie können einen bestimmten Bereich durch Anklicken aktivieren und Sie können einen aktiven Bereich durch Anklicken des Button mit dem roten X löschen und Sie können den Einstellungen-Dialog des Bereichs durch Anklicken des Buttons mit dem Stift aufrufen.

Wie in Abbildung 9.15(a) zu sehen, wird der aktive Bereich mit roten Quadraten dargestellt. Es ist möglich Punkte einzufügen, zu löschen und die Punkte zu bewegen. Mit dem Pfeilicon des Selektionswerkzeugs kann jeder Punkt durch Klicken und Ziehen verschoben werden. Ein Punkt kann durch Rechtsklicken gelöscht werden, was das Menu in Abbildung 9.15(b) aufruft. Ein Punkt kann zu einer Linie durch Rechtsklicken hinzugefügt werden, was das Menu in in Abbildung 9.15(c) aufruft.

Nachdem alle gewünschten Bereiche selektiert und die Hyperlinks definiert wurden, kann die Arbeit durch Klicken auf das Floppy-Disk-Icon oder mit der Sichern unter-Funktion im Dateimenu gespeichert werden. Dies ruft einen Dialog auf, der gestattet einen Dateinamen einzugeben. Der Name der Datei sollte auf .html oder .htm enden.

Ein realistischeres Beispiel des ImageMap-Plugin wird in Abbildung 9.16(a) dargestellt.

  

Abbildung 9.16: Karte der südöstlichen Vereinigten Staaten und die ImageMap-Dialog

Dieses Bild ist eine Karte südöstlichen Vereinigten Staaten. Jedem der zehn Staaten ist ein zweibuchstabige Abkürzung zugewiesen: FL für Florida, GA für Georgia, AL für Alabama usw. Das Ziel ist es eine verweisensitive Grafik mit einem Hyperlink für jeden Staat. Abbildung 9.16(b) zeigt den ImageMap-Dialog mit dem Bild aus Abbildung 9.16(a) , das in den 'Malleinwand'-Bereich geladen wurde. Der Umriss für jeden Staat kann leicht mit dem Polygonselektionswerkzeug gemacht werden. Wenn alle Staaten umrissen wurden und das Endergebnis in eine Datei gespeichert wurde, wird folgende Datei erzeugt:

<IMG

SRC="/home/cbunks/PROJECTS/GIMP/BOOK/08-WEB_CENTRIC/Abbildungen/southeast-usa.png"

WIDTH=482 HEIGHT=428 BORDER=0 USEMAP="#">



<MAP NAME="">

<!-- #$-:Image Map file created by GIMP Imagemap Plugin -->

<!-- #$-:GIMP Imagemap Plugin by Maurits Rijk -->

<!-- #$-:Please do not edit lines starting with "#$" -->

<!-- #$VERSION:1.1 -->

<!-- #$AUTHOR:Carey Bunks -->



<AREA SHAPE="POLY" COORDS="6,91,10,178,21,183,21,195,98,195,113,144,128,

107,113,104,120,92" HREF="http://www.good-travel.com/arkansas.html">



<AREA SHAPE="POLY" COORDS="21,197,21,234,32,252,22,291,49,292,69,299,75,

295,101,312,117,307,131,308,150,312,142,298,120,281,138,276,130,255,83,253,

100,197" HREF="http://www.good-travel.com/louisiana.html">



<AREA SHAPE="POLY" COORDS="119,136,172,135,174,276,140,277,132,255,85,253"

HREF="http://www.good-travel.com/missouri.html">



<AREA SHAPE="POLY" COORDS="119,136,269,127,288,106,334,74,168,83,170,88,

136,93" HREF="http://www.good-travel.com/tennessee">



<AREA SHAPE="POLY" COORDS="139,91,170,90,170,81,285,75,319,43,295,28,293,12,

274,18,251,4,243,4,243,12,232,18,218,39,209,33,186,48,171,46,157,65,145,68"

HREF="http://www.good-travel.com/kentucky.html">



<AREA SHAPE="POLY" COORDS="173,272,200,271,190,248,261,247,261,208,235,130,

170,133" HREF="http://www.good-travel.com/alabama.html">



<AREA SHAPE="POLY" COORDS="237,132,263,213,266,254,342,255,342,245,357,247,

367,207,305,139,292,135,296,126" HREF="http://www.good-travel.com/georgia.html">



<AREA SHAPE="POLY" COORDS="300,127,296,133,365,205,420,146,388,120,357,122,351,

113,317,117" HREF="http://www.good-travel.com/south-carolina.html">



<AREA SHAPE="POLY" COORDS="333,74,270,124,304,124,314,117,354,112,360,120,386,

120,423,145,433,145,440,127,465,111,459,97,479,78,468,60"

HREF="http://www.good-travel.com/north-carolina.html">



<AREA SHAPE="POLY" COORDS="195,253,198,271,227,271,257,288,284,275,318,303,

328,303,329,345,347,365,360,395,388,416,404,410,408,367,385,317,355,249,342,

248,342,259,335,259,335,255,266,256,259,249"

HREF="http://www.good-travel.com/florida.html">



</MAP>

Wie Sie sehen können ist jeder definierte Bereich im ImageMap-Dialog mit dem AREA Hypertext-Markup-Tag bestimmt. Dieser Tag enthält die Koordinaten des polygonalen Bereichs und den Text des zugehörigen Hyperlinks. Das oben beschriebene Beispiel kann wie ein HTML-Dokument betrachtet werden, indem Sie hier klicken. HTML-Dateien, die mit ImageMap erzeugt wurden, können erneut geladen und durch den Plugin bearbeitet werden. Normalerweise wird dies durch erneutes Laden des Originalbild in GIMP gemacht. Der ImageMap-Plugin wird auf das Bild angewendet und dann wird die gespeicherte Datei mit dem Öffnen-Befehl des Datei-Menus des Plugins geladen. Abbildung 9.17

  

Abbildung 9.17: Die Bilddatei vor einem weissen Hintergrund zurückgeladen

zeigt das Ergebnis dessen mit der HTML-Datei, die für Abbildung 9.16 geschaffen wurde. Statt jedoch den ImageMap-Plugin vor der Originalkarte laufen zu lassen, wird dies vor einem leeren Bild mit denselben Abmessungen wie der Karte getan. Dies gestattet die geladenen Grafikkartenbereiche gegen den weissen Hintergrund zu sehen. Dies hat keine praktische Anwendung, aber es ist ein guter Weg die Ergebnisse dieses Beispiels darzustellen. Beachten Sie, dass der Bereichslistenbereich für jeden der 10 Staaten einen Eintrag zeigt. Klicken auf einen Eintrag markiert den Bereich in der 'Malleinwand', wie in Abbildung 9.17 für den Staat Alabama dargestellt.

Eine letzte Bemerkung: Sie können die mit ImageMap erzeugt HTML-Datei mit einem Webbrowser öffnen, um festzustellen, ob sie richtig funktioniert. Wenn nötig können Sie die HTML-Datei direkt mit einem Texteditor bearbeiten. Abbildung 9.18

  

Abbildung 9.18: Karte der südöstlichen Vereinigten Staaten in Netscape

zeigt die verweissensitive Grafik für das vorige Beispiel im 'Netscape Navigator Web Browser'. Beachten Sie, dass der Mauszeiger, dargestellt durch eine kleine nach links zeigende Hand, auf den unteren Punkt des Staates Florida zeigt. Die Tatsache, dass der Mauszeiger als eine Hand erscheint bedeutet, dass er über einem aktiven HTML-Link ist, und unten im Browserfenster können Sie den zugehörigen Hyperlink im Informationsfeld sehen.

Der ImageMap-Plugin hat viele Eigenschaften. Dieses Buch ist kein passender Platz, um den Plugin im Detail darzustellen. Die meisten Eigenschaften sind jedoch nicht schwer zu entdecken und sie sollten in der Lage sein ihre Verwendung mit ein bisschen Experimentieren herauszufinden.

©2000 Gimp-Savvy.com