Bilder in JavaScript Beispiel 7: JavaScript Bilder PopUp

Das folgende Beispiel soll, ähnlich wie das Beispiel zum Thema PopUp in JavaScript, ein PopUp Fenster zur Darstellung eines einzelnen Bildes öffnen. Durch Anklicken der Links wird die im Link beschriebene Operation gestartet. Dazu werden im unteren Script zwei Funktionen definiert, wobei die erste zum Öffnen und die zweite zum Schließen des PopUps benötigt wird. Die erste Funktion mit dem Namen open_bilder_popup öffnet ein DIV-Fenster, in dem ein Bild – dessen URL im ersten Parameter in Form eines Strings übergeben wird – dargestellt wird. Weitere Beispiele zu JavaScript und DIVs finden Sie unter DIV-Beispiele.

Open_bilder_popup lädt direkt zu Beginn der Funktion das darzustellende Bild in einem Image-Objekt. Danach wird geprüft, ob das DIV bereits existiert (durch getElementById). Die Methode getElementById gehört, zusammen mit anderen Methoden, zum Document-Object. Ist dies der Fall, so wird das Bild dem im DIV-Element enthaltenen IMG-Element zugewiesen, was den Browser dazu veranlasst, das Bild umgehend darzustellen. Ansonsten wird das benötigte DIV per createElement-Methode erzeugt und evtl. nach den beiden Parametern left und top positioniert. Werden die optionalen Parameter left und top nicht angegeben, so wird das DIV-Element an einer vorgegebenen Position dargestellt. Die Positionierung und einige andere Layout-Eigenschaften wird mittels CSS-Eigenschaften gesetzt.

Zum Schließen des DIV-PopUps wird dann ein Link (A-Tag) erzeugt, der beim Anklicken (durch entsprechende Belegung des href-Attributs) die weiter unten definierte Funktion close_bilder_popup aufruft. Nach dem Link-Element wird noch das IMG-Element erzeugt, in welchem das Bild dargestellt wird. Bevor das neu erzeugte DIV-Element unter dem Body-Tag in das HTML-Dokument eingefügt wird, werden noch die erzeugten Elemente (der Link und das Bild-Tag) hierarchisch unter dem DIV-Element eingehängt.

In der weiter unten definierten Funktion close_bilder_popup wird ein eventuell existierendes Bilder-PopUp geschlossen. Dabei wird zuvor mit dem if-Statement geprüft, ob das Element, welches bei seiner Erzeugung die ID bilder_popup zugewiesen bekommen hat, überhaupt existiert. Wenn dem so ist, dann wird dieser Elementknoten mit der Methode removeChild aus dem HTML-Dokumentenbaum entfernt, was sofort im Fenster Ihres Browsers angezeigt wird. Da das Element bei der Erzeugung als Kindelement unter dem Body-Tag eingefügt wurde, muss er auch von diesem Element aus gelöscht werden.

Beachten Sie bitte auch die Anleitung, wie Sie JavaScript Code in HTML integrieren können. Weiterführende Informationen zum in diesem Beispiel genutzten Document Object Model finden Sie unter DOM. Im vorliegenden Beispiel wird das Öffnen des DIV-Fensters über das Anklicken eines Links veranlasst. Denkbar ist aber auch, dass dieser Vorgang durch das Eintreten eines Events eingeleitet wird. Einige der unter JavaScript verfügbaren Events werden in den Beispielen auf dieser Seite beschrieben (s. Navigation an der Seite unter Ereignisse). Dazu gehören das onLoad-Event und das onClick-Event. Zusätzliche Informationen zum Öffnen und Schliessen von Browserfenstern mit JavaScript finden Sie unter open, sowie close.

Was die auf dieser Seite genutzten Bilder angeht, so sind diese nicht von mir, sondern werden freundlicherweise durch www.KunstundReisen.de zur Verfügung gestellt. Sollten Ihnen die Fotos gefallen, dann schauen Sie doch einfach mal dort rein.

<a href="javascript:open_bilder_popup ('/javascript-demos/java-script-galerie/photos/boot.jpg')" title="">Bilder PopUp oeffnen</a><br>
<a href="javascript:close_bilder_popup ()" title="">Bilder PopUp schliessen</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion öffnet ein JavaScript Bilder PopUp
// Der erste Parameter enthält die URL des anzuzeigenden Bildes
// Die beiden optionalen Parameter left und top geben absolute
// Koordinaten zur Darstellung des DIV-Elements vor. (linke, obere Ecke)
// Sie können als Strings samt Einheit (px, em, ...) angegeben werden.
function open_bilder_popup (url, left, top) {
  // Bild schon mal in einem Image-Objekt laden
  var bild = new Image ();
  bild.src = url;
  // Existiert schon ein Bilder PopUp?
  if (document.getElementById ('bilder_popup') &&
      document.getElementById ('bilder_popup_img'))
    // Dann soll dieses PopUp verwendet werden
    document.getElementById ('bilder_popup_img').src = url;
  else {
    // DIV-Element erzeugen und per Style entsprechend formatieren
    var popup = document.createElement ('div');
    popup.id = 'bilder_popup';
    // Positionierung des DIV-Elements
    // Wurden Angabe zur Positionierung gemacht?
    if (!left && !top) {
      // Es wurde keine Position angegeben!
      // Position wird auf vorgegebene Werte gesetzt
      // Beachten Sie: Fixed funktioniert beim IE erst ab Version 7
      // Alternativ kann die Positionierung
      popup.style.position = 'fixed';
      popup.style.left = '350px';
      popup.style.top = '50px';
    }
    else {
      // Position wird in absoluten Koordinaten gesetzt
      popup.style.position = 'absolute';
      popup.style.left = left;
      popup.style.top = top;
    }
    popup.style.backgroundColor = 'white';
    popup.style.padding = '0em 1em 1em 1em';
    popup.style.border = '1px solid black';
    // Link zum Schließen des PopUps einfügen
    var close = document.createElement ('a');
    close.appendChild (document.createTextNode ('schliessen'));
    close.href = 'javascript:close_bilder_popup ()';
    close.style.textAlign = 'right';
    close.style.display = 'block';
    popup.appendChild (close);
    // Jetzt folgt das eigentliche Bild in einem IMG-Tag
    var img = document.createElement ('img');
    img.id = 'bilder_popup_img';
    img.src = bild.src;
    popup.appendChild (img);
    // Und zum Schluß das DIV-Element in das HTML-Dokument einfügen
    document.getElementsByTagName ('body')[0].appendChild (popup);
  }
}

// Funktion zum Schließen eines zuvor geöffneten PopUp-Fensters
function close_bilder_popup () {
  // Verweis auf ein HTML-Element mit der ID bilder_popup ermitteln.
  var popup = document.getElementById ('bilder_popup');
  // Existiert überhaupt ein Element mit der ID bilder_popup?
  if (popup)
    // Dann kann dieses Element aus dem HTML-Dokumentenbaum
    // gelöscht werden.
    document.getElementsByTagName ('body')[0].removeChild (popup);
}
// -->
</script>

Bilder PopUp oeffnen
Bilder PopUp schliessen



¬ Insolvenzrecht