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