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.
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
