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