Window festgelegte Bildgröße
    
 HomeBilder • PopUp festgelegte Größe 03a BEISPIEL  ScriptCode

  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 Größenänderung

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
PopUp-Window mit Srollbars und Größenänderung
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





Erstellt: 08.12.2003   

NACH OBEN