 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ätzlicher Hinweis als Text unterhalb der Grafik / dem Foto.
|
|
PopUp-Window 05 - mit Hinweistext im Fenster
UPDATE 17.02.2010, Anzeige in der Bildschirmmitte, Formatierung des Infotextes
Das JavaScript
1) schreibt den HTML-Code für ein PopUp-Window
2) schreibt den HTML-Code für die darin dargestellte Grafik
3) schreibt unter dem Bild eine Anweisung zur Darstellung einer Information
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 oder zur Bildbeschreibung. Die Anzeige unterhalb des Bildes ist ein Text, der beim Aufruf individuell (genauso wie die Hintergrundfarbe) übergeben werden kann.
- individueller Text oder Standardtext
- individuelle Hintergrundfarbe oder Standardfarbe
Eine zur Grafik passende Hintergrundfarbe können sie frei festlegen. Der Farbwert wird mit dem Text und den anderen Angaben der Funktion übergeben.
Aufwand
- JavaScript in den Head-Bereich kopieren
- Eintrag für die Fensterposition ändern (feste Position / Mitte)
- Aufruf für die PopUp-Window_funktion in den Links notieren
- die Eintragungen in den Links anpassen
Eintragungen im Aufruf für das Bildfenster
Der Aufruf enthält bis zu 5 Informationen (Parameter): 'welches Bild', 'wie breit', 'wie hoch', 'welche Hintergrundfarbe' und 'welcher Text'. 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 (kann frei bleiben)
5) Text (kann frei bleiben)
Beispiel mit individuellem Farbwert und Text:
javascript:BildFenster05('fotogross.jpg','500','375','#FFFF00','Foto vom 15.01.2010');
Beispiel für Standard-Farbwert und -Text:
javascript:BildFenster05('fotogross.jpg','500','375','','');
Bleiben die letzten beiden Eintragungen frei, wird der Default- / Standardwert verwendet. Standardwerte werden im Script festgelegt:
// falls kein Farbwert übergeben wurde - Standard-Hintergrundfarbe schwarz
if(farbe == "") {
farbe = "#000000";
}
// falls kein Text übergeben wurde - Standardtext
if(hinweis == "") {
hinweis = "Default-Text: © Jupp Zupp";
}
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 = "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.
Achten Sie auf die (eingestrichenen) Anführungszeichen !
<a href="javascript:BildFenster05('foto.jpg','240','180','#FFFF00','Ihr Text')">
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','500','375','#FFFF00','Ihr Text')">
Zur Anpassung folgende Änderungen im Aufruf:
| Element |
hier im Beispiel |
ersetzen mit |
| Bildquelle |
foto-gross.jpg |
Pfad/Dateiname |
| Breite |
500 |
Wert in Pixel |
| Höhe |
375 |
Wert in Pixel |
| Farbwert |
#FFFF00 |
hexadezimale Farbangabe |
| hinweistxt |
© Jupp Zupp |
Ihr Text |
ä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 04 - passend öffnen mit Infotext beim Anklicken
DHTML-Box einblenden - Großansicht für eine Grafik ohne PopUp-Window
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 Anzeige in der Bildschimmitte statt Fenstermitte
|
|
|
Home • Bilder • PopUp im Bildmaß 05
BEISPIEL
)
)
)