 PopUp-Window in Bildgröße - Version 5
Ein Klick auf ein Vorschaubild öffnet ein PopUp-Window in passender Größe mit der Großansicht der Grafik. Erweiterung: Zusätzliche Hinweisgrafik unter dem Foto.
(Erklärungen auch im Beispiel 'Window in Bildgröße 1 / 2)
Das JavaScript
1) schreibt den HTML-Code für ein PopUp-Window
2) schreibt den HTML-Code für die darin dargestellte Seite
3) schreibt unter dem Bild eine Anweisung zur Darstellung einer Grafik
4) überwacht einen MouseClick um das Window zu schließen
5) überwacht einen Focusverlust um das Window zu schließen
Testen: Vorschau anklicken
Features:
Diese Version habe ich auf Anfrage erstellt. Gewünscht wurde ein zusätzlicher Hinweis zum Schließen des Windows. Die Anzeige unterhalb des Bildes ist eine transparente Grafik.
|
|
Die Hintergrundfarbe (im Screeshot grün) können sie frei festlegen. Der Farbwert wird mit den anderen Angaben dem Script übergeben. So können sie nun auch eine Grafik mit weißer Schrift einbinden, falls ein dunkler Hintergrund besser ins Layout passt.
zum Downloaden
6 transparente Grafiken, Abmessungen: 150 x 17 Pixel (hier mit Rand dargestellt), rechtsklicken zum Download:
  
Dort könnte man auch eine Grafik mit Copyrigt-Hinweis einbinden:
  
3 Grafiken mit weißer Schrift, Abmessungen: 150 x 17 Pixel (Rand zur Demo eingeschaltet) vor dunkler Hintergrundfarbe:
Einbindung
Einbinden der Grafik im Script: Pfad/Dateiname eintragen
document.write("<img align='right' src='close13.gif' border='0'><br>");
Aufwand
- JavaScript in den Head-Bereich kopieren
- Grafik festlegen
- Aufruf für das Window im Link notieren
- Eintragungen im Aufruf anpassen
Eintragungen im Aufruf für das Bildfenster
Der Link im Aufruf enthält 4 Informationen: 'welches Bild' , 'wie breit' , 'wie hoch' und 'welche Hintergrundfarbe' für die Zeile mit dem zusätzlichen Hinweis. Den Rest der Arbeit erledigt das JavaScript im Head-Bereich.
Übergabeparameter für:
1) Bildquelle: Pfad, Dateiname
2) Breite in Pixel
3) Höhe in Pixel
4) Farbwert für die Hintergrundfarbe der Zeile
Link im Body:
Javascript:BildFenster05(' 1 ',' 2 ',' 3 ',' 4 ');
Javascript:BildFenster05('foto.jpg','240','180','#FFFF00');
Positionsbestimmung wahlweise
Sie können das Bildfenster wahlweise an fester Position anzeigen lassen oder durch das Script die Position in der Bildschirmmitte errechnen lassen. Das bestimmen sie selbst. Den Eintrag dazu finden sie im Script:
var FestePosition = "ja";
|
|
Wenn eine feste Position für die Anzeige gewünscht wird, dann tragen sie für die Variable 'FestePosition' ein "ja" ein und legen die X- / Y-Werte für die linke obere Ecke des Bildfensters in den beiden Variablen fest:
VonLinks = 20;
VonOben = 20;
Wenn sie den Eintrag mit "nein" festlegen, versucht das Script die Position zu ermitteln.
Info zur automatischen Positionsbestimmung
Das PopUp-Window soll bei der automatischen Positionsbestimmung auf dem Bildschirm zentriert angezeigt werden. Dazu werden die Fenstermaße ermittelt. Das geschieht browserabhängig mit unterschiedlichen Anweisungen. Nur reagieren die Browser recht unterschiedlich. Informationen dazu können sie hier einblenden:
|
|
 Abweichungen der Anzeigeposition - Info einblenden / ausblenden
Info zur Abweichung der Anzeigeposition
Zur Positionsbestimmung wird die Fenstergröße ermittelt. Diese Werte beziehen sich auf das aktuelle Fenster (blaue Pfeile). Füllt das aktuelle Fenster nicht den gesamten Bildschirm (zum Beispiel in einem Frameset), erscheint das PopUp-Window nicht in der Mitte dieses aktuellen Fensters.
Grund: Ermittelt werden die Fenstermaße im aktuellen Fenster des Frames (gelb). Bei der Positionierung werden die errechneten Werte eingesetzt, die (in diesem Script) als Bezug für die Positionsbestimmung des PopUp-Windows aber die linke obere Ecke des Bildschims annehmen.
Bei einer Seite ohne Frames stimmt zumindest der errechnete X-Wert für eine genaue Anzeige in der horizontalen Bildschirm- und Seitenmitte, da beides identisch ist. Aber auch das trifft nur für ein Browserfenster zu, das maximiert (nicht verkleinert) ist.
Info ausblenden
Hinweis zur Innenhöhe beim IE6 - einblenden / ausblenden
Falls es Probleme gibt
Im IE6 gibts ein Problem bei der Art und Weise der Höhenbestimmung abhängig von der DOCTYPE-Angabe des HTML-Dokuments. Offenbar wird, abhängig von der Deklaration des Dokumenttyps mit DOCTYPE, im IE6 u.U die gesamte Dokumenthöhe ausgelesen, nicht die innere Fensterhöhe. Das würde z.B. hier, bei meinem Dokument 2815 Pixel bedeuten!
Ein Bildfenster, irgendwo bei 1300 Pixel (vom oberen Bildschirmrrand gemessen) angezeigt, wäre nicht sichtbar.
1) Nutzt man diese TYPE-Angabe klappts aber auch mit der alten Programmzeile zur Innenhöhenbestimmung:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
(Sie müssen also nichts abändern)
2) Falls sie im IE6 Probleme haben und sie es bei ihren abweichenden DOCTYPE-Angaben belassen möchten, schafft eine Änderung im Script (Auszug) Abhilfe. Sie ersetzen die durchgestrichene Zeile durch die darunter in blau dargestellte Programmzeile:
else if(ie4) {
sbreite = document.body.clientWidth;
shoehe = document.body.clientHeight;
shoehe = document.documentElement.clientHeight;
alert(shoehe); // Meldung der festgestellten Höhe - als Test
}
Die Zeile mit der alert-Meldung (orange) können sie während des Testens 'einbauen'.
Zitat SELFHTML:
Im Internet Explorer können Sie mit document.body.clientHeight die innere Fensterhöhe bestimmen. Wenn Sie eine Dokumenttyp-Deklaration einsetzen, die im Internet Explorer 6 den Seite standardkonformen Modus auslöst, müssen Sie document.documentElement.clientHeight statt document.body.clientHeight verwenden.
|
Info ausblenden
häufige Fehlerursachen
Die Angaben für die Referenz (href) stehen in (doppelt-gestrichenen) Anführungszeichen. Beginnend mit dem ersten, enden die Angaben mit dem nächsten. Logisch, das zwischen den beiden Anführungszeichen dann keine weiteren (doppelt-gestrichenen) Anführungszeichen stehen dürfen.
Da aber die 4 zu übergebenden Werte ebefalls in Anführungszeichen stehen sollen, verwendet man dazu die eingestrichenen Anführungszeichen
Tastenkombination für das Hochkomma: Umschalt + #
|
|
Achten Sie auf die (eingestrichenen) Anführungszeichen !
<a href="javascript:BildFenster05('foto.jpg','240','180','#FFFF00')">
kleines Foto
</a>
Pfadangaben
Wenn die Bilder nicht im gleichen Ordner abgelegt sind, sollten sie den Pfad eintragen.
<a href="javascript:BildFenster05('images/foto.jpg','240','180','#FFFF00')">
Zur Anpassung folgende Änderungen im Aufruf:
| Element |
hier im Beispiel |
ersetzen mit |
| Bildquelle |
foto-gross.jpg |
Pfad/Dateiname |
| Breite |
240 |
Wert in Pixel |
| Höhe |
180 |
Wert in Pixel |
| Farbwert |
#FFFF00 |
hexadezimale Farbangabe |
| Schließen-Grafik |
close03.gif |
Dateiname |
Update Info
Im Laufe der letzten Jahre wurd das Script immer wieder angepasst.
Update-Info
1) Durch einen erneuten Linksklick auf ein anderes Vorschaubild wird ein bereits geöffnetes Bildfenster geschlossen
2) Bei Focusverlust wird das PopUp ebenfalls automatisch geschlossen.
Daraus folgt: Ein aufgerufenes Fenster steht immer im Vordergrund. PopUps verschwinden nicht in der Startleiste.
3) Ärger mit NS 7.x set Focus() ausgeräumt
4) Mozilla meckert nicht mehr (13.07.2004)
5) Für DreamWeaver wurde der String 'JavaScript' zerpflückt, damit er nicht mehr zusammenhängend erscheint und einen vermeintlichen Fehler anzeigt.
6) Der String 'body' wurde 'zerpflückt', damit er nicht mehr zusammenhängend erscheint und einen vermeintlichen Fehler auslöst.
7) 2007 Die Fensterposition kann berechnet oder festgelegt werden.
|
|
|
Home
ScriptCode 
ZURÜCK )
)
