Java Script : Grafik wird in passendem PopUp geöffnet

Zurück zur Java Scripts-Hauptseite.

Dies Script öffnet jede Grafik in einem passenden Browserfenster. Es ist lediglich nötig, neben der URL der Grafik, die beiden Werte für Breite und Höhe im Link zu übergeben. Außerdem können ohne viel Aufwand weitere Inhalte in diesem Fenster integriert werden.

Folgenden Script-Code in den Head-Bereich der Webseite einfügen:

popx=0;
function GrafikPopUp(Grafik,GrafikBreit,GrafikHoch) {

AusgleichBreit=0;                     // Fenster breiter als Grafik
AusgleichHoch=20;                     // Fenster hoeher als Grafik
FensterBreit=GrafikBreit+AusgleichBreit;
FensterHoch=GrafikHoch+AusgleichHoch;
PositionX=((screen.availWidth/2)-(FensterBreit/2));    // Anzeigeposition von links
PositionY=((screen.availHeight/2)-(FensterHoch/2));    // Anzeigeposition von oben

// nachfolgend die Eigenschaften des Pop-Up
popGrafik=window.open("",popx,"toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,fullscreen=0,width="+FensterBreit+",height="+FensterHoch+",top="+PositionY+",left="+PositionX);

//  Anfang Inhalt des Pop-Up
popGrafik.document.writeln("<html><head></head>");
popGrafik.document.writeln("<body bgcolor='#00009F' text='#FFFFFF' link='#FFFFFF' vlink='#FFFFFF' marginheight='0' marginwidth='0' topmargin='0' leftmargin='0'>");
popGrafik.document.writeln("<center><img name='Bild"+popx+"' src='"+Grafik+"' width='"+GrafikBreit+"' height='"+GrafikHoch+"'><BR>");
popGrafik.document.writeln("<a href='javascript:window.close()'>Fenster schliessen</a></center>");
popGrafik.document.writeln("</body></html>");
//  Ende Inhalt des Pop-Up

popx ++;
}
-->
</script>

Die beiden Werte AusgleichBreit=0; und AusgleichHoch=20; können entsprechend des Inhalts angepasst werden. In diesem Beispiel wurde zusätzlich zur Grafik noch der Link Fenster schliessen eingebaut. Damit er sichtbar angezeigt wird, muß das Fenster in der Höhe etwas größer (hier 20 Pixel) sein.

Die Werte PositionX=((screen.availWidth/2)- (GrafikBreit/2)); und PositionY=((screen.availHeight/2)- (GrafikHoch/2)); geben an, wo das Fenster erscheinen soll. Angegeben wird die obere, linke Ecke. Y ist dabei der Wert von oben und X der Wert von links. Im Beispiel wird eine Berechnung zur Positionierung der Grafik in der Mitte des Bildschirms ausgeführt. Der Code kann natürlich auch durch feste Zahlenwerte ersetzt werden,

Die Eingenschaften des Pop-Ups lassen sich durch einige Parameter festlegen. Erlaubt sind nur die Zahlenwerte 0 für nein und 1 für ja. Der Fullscreenmodus wir nur vom Internetexplorer ausgeführt.

popGrafik=window.open ("","popx","toolbar=0, location=0, directories=0, status=0, menubar=0, scrollbars=0, resizable=0, fullscreen=0, width="+FensterBreit+", height="+FensterHoch+", top="+PositionX+",left="+PositionY);

Im Bereich Inhalt des Pop-Up wird der eigentliche Code über die Funktion writeln erzeugt. Anpassungen sollten hier nur sehr gewissenhaft erfolgen, da Fehler unweigerlich zu Fehlfunktionen führen.

Der Aufruf erfolgt über einen speziellen Link.

Für grafik.jpg ist der Name (URL), für breite und hoehe sind die Zahlenwerte für die Breite und Höhe der Grafik anzugeben. Diese Angaben sind zwingend erforderlich, ansonsten funktioniert das Script nicht. Beispiel:

Anzumerken bleibt noch, dass die meisten Browser keine Fenster kleiner 100x100 Pixel darstellen und es zu einer Fehlfunktion kommt, wenn die Parameter für Breite und Höhe der Grafik nicht mit dem Link übergeben werden.

Demonstration:

Kontaktformular - Copyrighthinweis und Impressum

zurück zur vorherigen Seite (nur mit Java Script)