 PopUp-Window kleiner als 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 PopUp-Window in Bildgröße
|
|
PopUp-Window 03A - Größe veränderbar
UPDATE 16.02.2010, Hintergrundfarbe in einer Variablen abgelegt
Anpassungen 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 an fester Position
|
Testen Sie das hier:
|
PopUp-Window mit Srollbars und möglicher Größenänderung an fester X-Y-Position
Sie möchten dem Seitenbesucher eine Grafik / ein Foto als Vorschau anzeigen. Ein Klick auf die Vorschau soll ein PopUp-Window mit der Großansicht öffnen. Wegen der großen Abmessungen der Grafik verzichten Sie darauf ein riesiges PopUp-Window zu öffnen, lassen aber eine Größenänderung des Fensters zu.
Es wird also ganz bewusst ein kleineres Fenster geöffnet als die Anzeige der Grafik es eigentlich erfordern würde. Scrollbars werden erlaubt und eine Größenänderung des PopUps zugelassen.
Fenstergröße |
|
Hier in der Version 03A wurden innerhalb der Funktion fixe Maße für das Window festgelegt, die sie natürlich ändern können. Ich habe für die Höhe einen Wert festgelegt, der bei meinem Beispilfoto einen vertikalen Scrollbar ausschließt.
// fixe Breite und Höhe für das PopUp-Window
wb = 300;
wh = 284;
Info: In der Version 03B werden die Abmessungen am Link individuell übergeben
Die Hintergrundfarbe für das Window können Sie ebenfalls festlegen. Ich wählte hier braun:
// Hintergrundfarbe
farbe = "#6F4E3F";
3 Eintragungen im Aufruf für das Bildfenster
Die Funktion BildFenster03A() erwartet 3 Parameter. Entsprechend enthält der Link im Aufruf 3 Informationen: 'welches Bild' , 'wie breit' und 'wie hoch'. Den Rest der Arbeit erledigt das JavaScript.
Übergabeparameter für:
a) Bildquelle: Pfad, Dateiname
b) Breite der Grafik in Pixel
c) Höhe der Grafik in Pixel
Aufruf der JavaScript-Funktion für das PopUp-Window im Body:
<a href="javascript:BildFenster03A(' a ',' b ',' c ')" ...
 Achten sie auf die 6 einstrichigen Anführungszeichen (Hochkommas)!
<a href="javascript:BildFenster03A('foto-gross.jpg','240','180');" ...
Vorteile ähnlich wie in den Versionen 01 + 02:
- 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
- Focusverlust schließt ein aktives PopUP durch onBlur() im HTML-Code des Windows
- Klicken außerhalb der Großansicht schließt ein aktives PopUp.
Ein bereits geöffnetes PopUp-Window wird durch einen Linksklick außerhalb der Großansicht 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.
Wahlweise Aktivierung:
- Klicken innerhalb der Großansicht schließt ein aktives PopUp.
Entfernen Sie die beiden Slasches in der 2. Zeile (rot) um diese Funktion zu aktivieren.
// bei click schliessen
// document.write("function click() { window.close(); } ");
ähnliche Themen
 PopUp-Window für eine Grafik 01 - passend öffnen mit Titeltext
PopUp-Window für eine Grafik 02 - passend öffnen ohne Titeltext
PopUp-Window für eine Grafik 04 - passend öffnen mit Infotext beim Anklicken
PopUp-Window für eine Grafik 05 - passend öffnen mit Beschreibungstext im Window
DHTML-Box einblenden - Großansicht für eine Grafik ohne PopUp-Window
|
Home • Bilder • PopUp festgelegte Größe 03a
BEISPIEL
)