Grafik Popup / Image Map

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

Beispiel Image Square 1 Square 2 Square 3 Square 4

Zuerst ein Image Map erstellen. Wenn dieser Quellcode 1:1 übernommen werden soll, muss die Grafik 216 x 216 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=216 HEIGHT=>

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 Popup Bereiche in einem <Map> Tag festlegen.

Dies ggf. auch anpassen:

<MAP NAME="test">
<AREA SHAPE="RECT" COORDS="4,2,108,103" HREF="JavaScript:image_popup.TextPopup (square1,popfont,9,9,-1,-1)" Alt="Square 1">
<AREA SHAPE="RECT" COORDS="117,6,212,104" HREF="JavaScript:image_popup.TextPopup (square2,popfont,9,9,200,-1)" Alt="Square 2">
<AREA SHAPE="RECT" COORDS="3,111,105,213" HREF="JavaScript:image_popup.TextPopup (square3,popfont,9,9,-1,200)" Alt="Square 3">
<AREA SHAPE="RECT" COORDS="114,113,211,210" HREF="JavaScript:image_popup.TextPopup (square4,popfont,30,30,-1,-1)" Alt="Square 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

Die Zahlen z.B. (10,10,-1,-1) bezeichnen den Rand Links/Rechts und Oben/Unten innerhalb des Popups Fensters, sowie die Vordergrund und Hintergrundfarbe, wobei -1 den Standardwert bezeichnet.

Jetzt den Text für die vier Popup Bereiche schreiben. Dies wird innerhalb eines kleinen Scripts im <head> Bereich der .htm Datei realisiert:

<SCRIPT Language=JavaScript>
popfont="Verdana,10,,plain"
square1="Text für Sektion A!"
square2="Text für Sektion B!"
square3="Text für Sektion C!"
square4="Text für Sektion D!" </SCRIPT>

Und zum Schluss noch die HTML Help ActiveX Control im <head> Bereich der .htm Datei einbinden:

<OBJECT
id=image_popup
type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
</OBJECT>

Und zu guter letzt bitte nicht vergessen, die oben eingebundene Grafik auch in die Projektdatei im [FILES] Abschnitt zu integrieren.

Anstatt Popups ist es auch möglich, die einzelnen Sektionen der Grafik mit Hyperlinks zu versehen. Beschreibung dazu gibt es hier.

Grafik mit Links