Grafik mit Links / Image Map

Dies ist ein Beispiel für eine Grafik, die in vier Sektionen unterteilt ist. Jeder der vier Sektionen wurde ein anderer Hyperlink zugeordnet.

Beispiel Image Help-Guide.de i-smo.de schulz-maschinenbau.de Werbung

Zuerst ein Image Map erstellen. Wenn dieser Quellcode 1:1 übernommen werden soll, muss die Grafik 446 x 335 groß sein.

Die Grafik wird dann durch folgenden Quellcode in die .htm Datei im <body> Bereich eingebunden.

<IMG SRC="images/ test.GIF" USEMAP="#test" BORDER=0 WIDTH=446 HEIGHT=335>

Wird eine andere Größe als oben erwähnt verwendet, müssen die WIDTH und HEIGHT Werte angepasst werden.

Danach durch die Einbindung des folgenden Quellcodes die vier Bereiche in einem <Map> Tag festlegen und mit den entsprechenden Hyperlinks versehen.

<MAP NAME="test">
<AREA SHAPE="RECT" COORDS="17, 57, 216, 198" HREF="http://ww.url1.de" Alt="URL 1">
<AREA SHAPE="RECT" COORDS="233, 60, 427, 198" HREF="http://ww.url2.de" Alt="URL 2">
<AREA SHAPE="RECT" COORDS="15, 224, 212, 367" HREF="http://ww.url3.de" Alt="URL 3">
<AREA SHAPE="RECT" COORDS="231, 224, 428, 367" HREF="http://ww.url4.de" Alt="URL 4">
</MAP>

Durch SHAPE="RECT" wird festgelegt, dass es sich bei dem Bereich um ein Rechteck handelt. Es ist auch möglich einen Kreis (SHAPE="CIRCLE") oder ein Polygon (SHAPE="POLY") zu definieren.

Durch COORDS= werden die Koordinaten für den Bereich festgelegt. Je nach Größe der Grafik müssen ggf. die Koordinaten für die Bereiche angepasst werden. Diese lassen sich am einfachsten mit einem WYSIWYG HTML Editor ermitteln bzw. festlegen.

Ansonsten sind die Koordinaten wie folgt angeordnet:

1. linke obere Ecke, Pixel von links
2. linke obere Ecke, Pixel von oben
3. rechte untere Ecke, Pixel von links
4. rechte untere Ecke, Pixel von oben

Es ist auch möglich die Bereiche mit Popups zu belegen, näheres siehe hier:

Popup Sektion eines Image Maps