 PopUp-Window in Bildgröße - Version 4
Ein Klick auf ein Vorschaubild öffnet ein PopUp-Window in passender Größe mit der Großansicht der Grafik. Das kennen sie aus den Versionen 1 + 2. Hier wird, anders als in den beiden Versionen, bei einem Klick auf das Bild im Window das geöffnete Fenster nicht geschlossen, sondern das Bild gegen einen Text ausgetauscht!
 19.03.2007 Hinweis auf Höhenbestimmung bei Problemen im IE6
21.03.2007 Positionsbestimmung fest oder automatisch
Texthinweis beim Klick auf das Bild im Window
Das JavaScript
1) schreibt den HTML-Code für ein PopUp-Window in Bildgröße
2) schreibt den HTML-Code für die darin dargestellte Seite
3) überwacht einen Focusverlust um das Window zu schließen
4) tauscht beim Anklicken des Bildes im Fenster den Fensterinhalt aus
 Srceenshot einblenden / ausblenden
Besonderheit der Version 04
Außer den bekannten Vorteilen hat dieses Script eine Besonderheit. Eine Erweiterung des Scripts tauscht beim Klicken auf die Grafik im Window den Inhalt des PopUp-Windows aus. Statt des Bildes wird eine HTML-Datei angezeigt. Diese Datei könnte z.B.
- auf Copyright-Bestimmungen hinweisen
- auf einen Download-Bereich hinweisen (für die Presse)
- auf einen Shop für lizensierte Bilder verweisen
Im eingeschränkten Maß ist das Script natürlich auch eine Downloadsperre durch direkten Rechtsklick.
Klicken sie auf ein Vorschaubild und dann im geöffneten Bildfenster auf das Foto, um die Funktion zu testen.
|
|
Voraussetzung ist also, das eine entsprechende HTML-Datei mit dem Text zur Verfügung steht. In diesem Beispiel ist der eingetragene Name der Datei 'window-bildmass04-nachricht.htm'
Scriptauszug:
(vollständiger Quellcode als Textdatei unter SCRIPTCODE)
...
document.write("function Nachricht() {");
// URL für die Hinweisseite hier eintragen
document.write('var hinweisseite = "window-bildmass04-nachricht.htm";');
document.write('window.location.href=hinweisseite; return false;}');
document.write("function Hinweis() {");
document.write("if(document.images)");
document.write("for(i=0;i<document.images.length;i++)");
document.write("document.images[i].onmousedown = Nachricht;}");
// ende Erweiterung hinweis
document.write('</scr' + 'ipt>');
document.write('<title>klick to close</title></head>');
document.write('<' + 'body onLoad="Hinweis()" onblur="window.close()" ');
...
Aufwand
- JavaScript in den Head-Bereich kopieren
- URL für die Meldungsseite eintragen
- Aufruf für das Window im Link notieren
- Eintragungen im Aufruf anpassen
- eine Html-Seite für die Meldung erstellen
URL der Meldungsseite im Script eintragen:
// URL für die Hinweisseite hier eintragen
document.write('var hinweisseite = "window-bildmass04-nachricht.htm";');
Notierung des Links für das Bildfenster
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
Javascript:BildFenster04(' a ',' b ',' c ');
Javascript:BildFenster04('foto-gross.jpg','240','180');
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:BildfFenster04('foto-gross.jpg','240','180')">
kleines Foto
</a>
 Pfadangaben!
Wenn die Bilder nicht im gleichen Ordner abgelegt sind, sollten sie den Pfad eintragen.
<a href="javascript:BildfFenster04('../images/foto-gross.jpg','240','180')">
Zur Anpassung folgende Änderungen im Link:
| Element |
hier im Beispiel |
ersetzen mit |
| Bildquelle |
foto-gross.jpg |
Pfad/Dateiname |
| Breite |
240 |
Wert in Pixel |
| Höhe |
180 |
Wert in Pixel |
|
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) 2006 Script (Meldung) für FF angepasst
8) 2007 Die Fensterposition kann berechnet oder festgelegt werden.
|
|
Erstellt: 20.12.2003
|
WWW.WEB-TOOLBOX.NET
ScriptCode 
ZURÜCK ;)
)
