 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 eine Funktion zum Öffnen des Windows auf.
|
|
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
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 hier verwendete Funktionsname ist 'FotoPopUp()' Der Funktion wird der Dateiname und die Breite und Höhe der Grafik übergeben.
PopUp-Window in Bildgröße 02
Syntax: FotoPopUp("dateiname.jpg","400","300")
<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" ...
Der Funktion 'FotoPopUp()' wird die Information für
- Dateiname
- Bildbreite
- Bildhöhe
erst beim Aufruf 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.
|
Home • Verweise • Image-Maps 04
Bsp 01
DOWNLOAD