Image-Map 2
    
 Home • Verweise • Image-Maps 02 Quellcode 

  Image-Maps 02   (Klick öffnet PopUp-Window)

Beim Klick auf einen verweissensitiven Bereich soll ein PopUp-Window für eine HTML-Datei geöffnet werden. Bestimmte Bereiche (hot spots) innerhalb einer Grafik als Verweisfläche deklarieren.
Bestimmte Bereiche einer Grafik als Klickfläche definieren - PopUp-Window

Aufbauend auf das Beispiel Image-Map 01 bei dem in der Regel eine Datei im gleichen Fenster geöffnet wird, soll hier beim Anklicken ein PopUp-Window geöffnet werden.


Rechteck Polygon Rechteck Grafik      Hier gibts 3 verweissensitive Flächen:

Rechteck: Honig
Polygon: Blüte
Rechteck: Bienen



   Einfügen der Aktionen

Statt des Rautezeichens (#) werden nun Befehle für die Aktion eingesetzt. 
<map name="oben">
<area href=" # " shape="rect" coords=" ...
<area href=" # " shape="poly" coords=" ...
<area href=" # " shape="rect" coords=" ...
</map>

<img src="waben02.gif" usemap="#oben" ...



   Window-Scriptaufruf eintragen

Der simple Aufruf eines JavaScripts: 
<area href="javascript:ScriptName()" shape="rect" ..
Der Aufruf eines erweiterten JavaScripts: 
<area href="javascript:popwin1('datei1.htm','300','170',0,0)" shape="rect" ..
<area href="javascript:popwin1('datei2.htm','350','200',0,0)" shape="poly" ..
<area href="javascript:popwin1('datei3.htm','390','150',1,1)" shape="rect" ..
Hier wird ein Window-Sript aufgerufen bei dem

  • Dateiname
  • Fensterbreite
  • Fensterhöhe
  • Scrollbars ja / nein
  • Größe änderbar ja / nein
erst beim Aufruf festgelegt werden.

Zur Anpassung im Link 1 folgende Änderungen im Aufruf:

Element    hier im Beispiel   ersetzen mit  
Dateiname datei1.htm dateiname
Fensterbreite 300 Wert in Pixel
Fensterhöhe 170 Wert in Pixel
Scrollbars 0 0 / 1
resizable 0 0 / 1


Mit den restlichen Aufrufen verfahren Sie nach dem gleichen Schema.