 PopUp-Window in Bildgröße - Version 3a
Ein Klick auf ein Vorschaubild öffnet ein PopUp-Window kleiner als das anzuzeigende Bild der Großansicht. Aufgebaut wurde dieses Beispiel aus der Version Window in Bildgröße 02
Veränderungen für dieses Beispiel:
- Fenster- und Bildgröße sind nicht identisch
- fixe Fenstergröße, unabhängig von der Bildgröße
- die Scrollbars sind immer eingeschaltet
- das Fenster ist in der Größe veränderbar
- das Fenster steht in der linken oberen Ecke
|
Testen Sie das hier:
|
PopUp-Window mit Srollbars und möglicher Größenänderung an fester Position
Sie möchten Ihrem Besucher zum Beispiel ein Image in Originalgröße anzeigen (1280 x 990 Pixel), können aber nicht davon ausgehen, dass die Bildschirmeinstellungen des Seitenbesuchers die Größe eises solchen POpUp-Windows zulassen.
Ein PopUp-Window in diesem Maß zu öffnen könnte also zu Problemen führen. Daher wird hier bewusst ein kleineres Fenster geöffnet, die sonst störenden Scrollbars erlaubt und eine Größenänderung des PopUps zugelassen.
|
|
Das das anzuzeigende Bild ohnehin größer als das Window sein wird, werden hier in der Version 3A fixe Maße für das Window im JavaScript festgelegt, die sie natürlich ändern können.
Info: In der Version 3b werden die Abmessungen am Link individuell übergeben
// fixe Fensterbreite und Höhe
wb = 240;
wh = 180;
3 Eintragungen im Aufruf für das Bildfenster
Die Funktion BildFenster03A() erwartet 3 Parameter. Entsprechend enthält der Link im Aufruf enthält 3 Informationen: 'welches Bild' , 'wie breit' und 'wie hoch'. Den Rest der Arbeit erledigt das JavaScript im Head-Bereich.
Übergabeparameter für:
a) Bildquelle: Pfad, Dateiname
b) Breite in Pixel
c) Höhe in Pixel
Aufruf der JavaScript-Funktion für das PopUp-Window im Body:
<a href="javascript:BildFenster03A(' a ',' b ',' c ')" ...
 Achten Sie auf die (eingestrichenen) Anführungszeichen (Hochkommas) !
<a href="javascript:BildFenster03A('foto-gross.jpg','240','180');" ...
Im Quellcode habe ich Kommentare zur Erklärung eingetragen. Die bisherigen Vorteile bleiben gleich:
- Die Vorschau-Bilder sind alle sofort zu sehen
- Durch kleine Vorschaubilder schnelle Ladezeiten
- Der Besucher entscheidet selbst welches Bild er groß sehen möchte
- Er kann das Foto so lange ansehen wie er möchte
- Klicken schließt ein aktives PopUp durch onClick() im HTML-Code des Windows.
- Focusverlust schließt ein aktives PopUP durch onBlur() im HTML-Code des Windows
Ganz praktisch: Ein bereits geöffnetes PopUp-Window wird durch einen Linksklick an beliebiger Stelle geschlossen. Sie müsssen nicht das kleine rote Schließen-Symbol  ansteuern. Das bedeutet auch, ein Klick auf das nächste Vorschaubild schließt das alte Window, während das neue geöffnet wird! Bei Focusverlust der Seite wird das PopUp-Window ebenfalls automatisch geschlossen. Daraus folgt: Ein aufgerufenes Fenster (wenn es eines gibt) steht immer im Vordergrund. PopUp-Windows verschwinden nicht in der Startleiste.
|
WWW.WEB-TOOLBOX.NET
BEISPIEL 
ZURÜCK )