Image-Map 4
 HomeVerweise • Image-Maps 04 Bsp 01  Bsp 02   DOWNLOAD  Quellcode 

Image-Maps 04   (Klick öffnet PopUp-Window in Bildgröße)

Beim Klick auf einen verweissensitiven Bereich soll ein PopUp-Window für eine Bild-Datei in passender Größe geöffnet werden. Klicken in einen verweissensitiven Bereich ruft die Funktion FotoPopUp() zum Öffnen des Windows auf, in dem das Foto angezeigt wird.
dhtml image-map shape pupup-window öffnen onclick layer

Bereiche einer Grafik als Klickfläche - PopUp-Window für Grafiken

Aufbauend auf meine Erklärungsseite Image-Map 01 habe ich dieses praxisbezogene Beispiel entwickelt. Während in der Regel bei einem ImageMap-Verweis eine HTML-Datei im gleichen oder neuen Fenster geöffnet wird, soll hier beim Anklicken ein PopUp-Window für ein Foto geöffnet werden.

Hier haben wir einmal eine echte 'Map' (Landkarte) :-)

In meinem Beispiel 04 sollen beim Klicken auf einen der 4 Flughäfen zugehörige Fotos angezeigt werden. Verweissensitive Bereiche für:

Düsseldorf, Köln, Hamburg, München

klick mich kick mich für mehr Info Foto anzeigen Foto anzeigen Foto Foto Foto


klick mich kick mich für mehr Info Foto anzeigen Foto anzeigen a)  die Grafik

<img usemap="#airports" src="airports.gif" width="400" height="429" border="0" alt="">


b)  der Basis-Code für die Map

<map name="airports">

<!-- Fenster Düsseldorf -->
<area href="#" alt="Foto" shape="rect" coords="67,196,93,217"></area>

<!-- Fenster Hamburg -->
<area href="#" alt="Foto" shape="rect" coords="174,70,205,96"></area>

<!-- Fenster Köln -->
<area href="#" alt="Foto" shape="circle" coords="93,233,10 "></area>

<!-- Fenster München -->
<area href="#" alt="Foto" shape="poly" coords="255,349,274,380,233,378"></area>

</map>
An Stelle der '#' würde der Dateiname (oder ein Aktionsaufruf) eingetragen.


   Einfügen der Aktionen

<area href="javascript:Funktionsname()" shape="rect" ..
Ich verwende hier meine Funktion 'PopUp-Window in Bildgröße 02'. Der Funktionsname ist 'FotoPopUp()' Der Funktion wird der Dateiname, die Breite und Höhe der Grafik übergeben.

Zur Seite PopUp-Window in Bildgröße 02
Syntax:  FotoPopUp("Dateiname","Breite","Höhe")


Funktionsaufruf mit Parameterübergabe

Beim Funktionsaufruf werden der Funktion 'FotoPopUp()' mehrere Parameter übergeben! In meinem PopUp-Window-Modul 'FotoPopUp()' sind das Angaben für Dateiname, Breite und Höhe.
<area href="Javascript:FotoPopUp('airport-duesseldorf.jpg','400','300')" alt="Foto" ...
<area href="Javascript:FotoPopUp('airport-hamburg.jpg','400','300')" alt="Foto" ...
<area href="Javascript:FotoPopUp('airport-koeln.jpg','400','300')" alt="Foto" ...
<area href="Javascript:FotoPopUp('airport-muenchen.jpg','400','300')" alt="Foto" ...
Oben wird eine selbst definierte Funktion für ein PopUp-Window aufgerufen. Die Funktion heißt 'FotoPopUp()'. Bei dieser Funktion werden Angaben für

erst beim Aufruf festgelegt und als Parameter übergeben. Anders als in meinem Beispiel müssen die Fotos also nicht identische Abmessungen haben!

Beispiel für Link 1:

Element    hier im Beispiel   ersetzen mit  
Dateiname airport-duesseldorf.jpg Dateiname
Bildbreite 400 Wert in Pixel
Bildhöhe 300 Wert in Pixel


Bei den Funktionsaufrufen verfahren Sie nach diesem Schema.








Das könnte Sie auch interessieren: