Im vierten Gimp-Artikel wird eine Imagemap erstellt.

Es handelt sich dabei um eine Grafik mit Hyperlink-Bereichen. Man kann also auf bestimmte Bereiche der Grafik klicken und interaktive Aktionen ausführen – etwa auf eine andere Webseite geleitet werden.

Imagemap erstellen:

Um mit Gimp eine Imagemap zu erstellen, gibt es den gleichnamigen Filter unter der Filter-Rubrik Web.

Innerhalb des Dialogfensters des Imagemap-Filters werden die Hyperlink-Bereiche festgelegt.

Die Bereiche für die Imagemap werden per Rechteck-Auswahlbereich festgelegt und dann als Hyperlink definiert. Die Imagemap in diesem Fenster als map-Datei speichern liefert die HTML Befehle für die Imagemap.

In der map-Datei steht nur der Quellcode der in die Webseite mit der Imagemap eingebunden wird. Die map-Datei selber wird also nicht unbedingt benötigt. Der Inhalt mit den Imagemap Koordinaten aber natürlich schon, denn der wird in die Webseite (also das HTML-Dokument) eingebunden.

Der Artikel der HTML-Webseite könnte beispielsweise so aussehen:

<article>

<h3>Die Imagemap mit Weblink-Funktion:</h3>

<p>

<img src=”02_Bilder/imagemapimage.jpg” width=”800″ height=”600″ border=”0″ usemap=”#map” />

<map name=”map”>

<!– #$-:Image map file created by GIMP Image Map plug-in –>

<!– #$-:GIMP Image Map plug-in by Maurits Rijk –>

<!– #$-:Please do not edit lines starting with “#$” –>

<!– #$VERSION:2.3 –>

<!– #$AUTHOR:Administrator –>

<area shape=”rect” coords=”38,42,225,181″ href=”Webseite 1″ />

<area shape=”rect” coords=”328,32,555,185″ href=”Webseite 2″ />

<area shape=”rect” coords=”317,267,574,397″ href=”Webseite 3″ />

</map>

</p>

<p class=”clearingtext”>

Hier stehen eventuell noch weitere Absätze mit unwichtigem Text…

</p>

</article>

<br />

Von Torsten