 PopUp-Window in Bildgröße - Version 4
Ein Klick auf ein Vorschaubild öffnet ein PopUp-Window für die Grafik in passender Größe. Anders als in den anderen Versionen: Bei einem Klick auf das Bild wird das geöffnete Fenster nicht geschlossen, sondern das Bild gegen einen Text ausgetauscht!
|
|
PopUp-Window in Bildgröße 04 - Texthinweis beim Klick
UPDATE 17.02.2010, Anzeige in der Bildschirmmitte statt in der Fenster- / Framemitte
Der Texthinweis beim Klick auf das Bild im PopUp-Window kann genutzt werden um z.B. auf ein Copyright hinzuweisen, Informationen zum Foto einzublenden oder auf einen separaten Download-Bereich hinzuweisen.
Im eingeschränkten Maß ist das Script natürlich auch eine Downloadsperre durch direkten Rechtsklick.
Klicken sie auf eine der Vorschaugrafiken und dann im geöffneten Bildfenster auf die Grafik, um diese Funktion zu testen.
Statt der Grafik wird dann eine HTML-Datei angezeigt. |
|
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 Grafik
3) überwacht einen Focusverlust um das Window zu schließen
4) tauscht beim Anklicken der Grafik im Fenster den Fensterinhalt aus
Grafik gegen HTML-Datei tauschen
Das Script tauscht beim Klicken auf die Grafik im PopUp-Window den Inhalt des Windows aus. Statt des Bildes wird dann 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
Voraussetzung ist also, das eine entsprechende HTML-Datei mit dem Text zur Verfügung steht. Im Quelltext des Beispiels ist der eingetragene Name der Datei 'nachricht.htm'. Tragen Sie gegebenenfalls für Pfad und Dateiname Ihre Angaben ein.
Scriptauszug:
(vollständiger Quellcode als Textdatei oben unter SCRIPTCODE)
...
document.write("function Nachricht() {");
// URL für die Hinweisseite hier eintragen
document.write('var hinweisseite = "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;}");
...
Aufwand
- JavaScript in den Head-Bereich kopieren
- Aufruf für die Funktion im Link notieren
- Eintragungen im Aufruf anpassen
- eine Html-Seite für die Meldung erstellen
- Dateiname für die Meldungsseite eintragen
Angaben im Verweis für die Großansicht:
<a href="Javascript:BildFenster04('gross.jpg','500','375');">
<img src="klein.jpg" width="150" height="113" border="0" ... >
</a>
Dateiname der Meldungsseite im Script eintragen:
// URL für die Hinweisseite hier eintragen
document.write('var hinweisseite = "nachricht.htm";');
Übergabeparameter für das Bildfenster
Der Link im Aufruf enthält 3 Informationen (Parameter): '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. Den Eintrag dazu finden sie im Script:
var FestePosition = "nein";
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:
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')">
Eintragungen im Link des Funktionsaufrufs:
| Element |
hier im Beispiel |
ersetzen mit |
| Bildquelle |
foto-gross.jpg |
Pfad/Dateiname |
| Breite |
240 |
Wert in Pixel |
| Höhe |
180 |
Wert in Pixel |
ä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 03 - in festgelegter Größe öffnen
PopUp-Window für eine Grafik 05 - passend öffnen mit Beschreibungstext im Window
Ab hier finden sie lediglich zusätzliche Informationen:
Info zur automatischen Positionsbestimmung
Nach dem Update (15.02.2010):
Das PopUp-Window soll bei der automatischen Positionsbestimmung auf dem Bildschirm zentriert angezeigt werden. Dazu werden die Bildschirmabmessungen festgestellt (maximal verfügbare Bildschirmgröße in Pixeln). Nach dem Update am 15.02.2010 verwende ich dazu
screen.availWidth;
screen.availHeight;
JavaScript-interne Funktionen die im IE ab 4.0, Opera ab 5.12, FF ab 1.0 Konquero ab 4.12 und Safari ab 1.0 funktioniert.
Vor dem Update:
Das geschah browserabhängig mit unterschiedlichen Anweisungen. Browser reagierten recht unterschiedlich. Informationen dazu können sie hier einblenden:
 Bisher: Abweichungen der Anzeigeposition - Info einblenden / ausblenden
Info zur Abweichung der Anzeigeposition vor dem Update
Zur Positionsbestimmung wurde 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 wurden die Fenstermaße im aktuellen Fenster des Frames (gelb). Bei der Positionierung wurden die errechneten Werte eingesetzt, die als Bezug für die Positionsbestimmung des PopUp-Windows aber die linke obere Ecke des Bildschirms annehmen.
Die Anzeige des PopUps vor meinem Update basierte in einem Frameset auf die Abmessungen des aktiven Frames (gelber Bereich), wurde also nicht wirklich in der Bildschirmmitte dargestellt. Das sollte mit dem Update behoben sein.
Bei einer Seite ohne Frames stimmte der errechnete XY-Wert für eine genaue Anzeige in der Bildschirm- und Fenstermitte, da beides identisch ist. Aber auch das traf nur für ein Browserfenster zu, das maximiert (nicht verkleinert) war.
Info ausblenden
Hinweis zur Innenhöhe beim IE6 - einblenden / ausblenden
Auch dieses Problem gibt es nun nicht mehr!
(Beschreibung nur noch als Info)
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
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.
8) 2010 Bildschirmmitte statt Fenstermitte
|
|
| 
Home • Bilder • PopUp im Bildmaß 04
ScriptCode
;)
;)