Popup für Bilder

Im Mangabereich dieser Homepage öffnen sich die Bilder in einem eigenen Popup. Die Fenstergröße entspricht den Bildmaßen. Sollte das Bild größer als die Bildschirmauflösung sein, wird das Popup entsprechend angepasst; es werden Scollleisten gezeigt und die Größe des Popups werden beschränkt.

Die Function besteht aus einer Routine, die das Popup generiert und der darin enthaltenen HTML-Seite die notwendigen Daten übergibt.

Beim Aufruf der Routine müssen folgende Werte übergeben werden:
Dateiname mit Pfadangabe, Höhe und Breite des Bildes, Titel des Popups und die Adresse der aufzurufenden HTML-Seite.

<A HREF="javascript:ZeigeBild('../../grafik/urlaub2000/bild_084.jpg',338,480,'Zebra','../../bild.htm')">
  <IMG CLASS="cBild" SRC="../../grafik/urlaub/t_bild_084.jpg" STYLE="WIDTH:90px; HEIGHT:124px">
</A>

Die Function speichert zuerst den Pfad und den Titel des Bildes global ab. Anschließend wird das Popup aufgerufen und direkt wieder geschlossen. Auf diese Weise wird ein evtl. noch offenes Popup ohne Fehlermeldung geschlossen.
Als nächstes wird kontrolliert, ob das Bild größer als die Bildschirmauflösung ist. Je nach Ergenis werden die Maße des Popups anders berechnet und der Aufruf des Popups ändert sich.

function ZeigeBild(bild,w,h,titel,ziel) {   //Informationsfenster aufbauen
  BildPfad = bild;                          //Variablen global speichern
  BildTitel = titel;
  var popupWindow = window.open("","N1");   //Öffne Popup
  popupWindow.close();                      //und schließe es sofort wieder
  if (screen.width > w && screen.height > h) {  //ist das Bild größer als die Auflösung
    x = screen.width - w - 10;
    popupWindow = window.open(ziel,"N1","width="+w+",height="+h+",left="+x+",top=0,screenX="+x+",
        screenY=0,status=no");
  }
  else {
    w = w + 16;
    x = screen.width - w - 10;
    if (x<0) x = 0;
    if (screen.width < (w+10))  w=screen.width-10; 
    if (screen.height < (h+20)) h=screen.height-20;
    h = h - 40;
    popupWindow = window.open(ziel,"N1","width="+w+",height="+h+",left="+x+",top=0,screenX="+x+",
        screenY=0,scrollbars=yes,status=no");
  }
}

Die Seite Bild.htm verwendet einige Male den Aufruf opener. Dieser Aufruf ermöglicht den Zugriff auf die aufrufende Seite. So ist es möglich die entsprechenden Informationen zu übertragen.
Der Rest der Seite ist normaler HTML-Code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<HTML>

<HEAD>
  <TITLE>Wird überschrieben</TITLE>

  <META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=ISO-8859-1">

  <SCRIPT TYPE="text/javascript">

    var pfad = opener.BildPfad;  //übernimm BildPfad aus dem aufrufenden Fenster.


    function Init() {
      document.title = opener.BildTitel;  //Ändere den Titel
      window.defaultStatus = "Bildpopup - © Thomas Kirfel (www.kirfel.info)";
      document.getElementById("iBild").src = pfad;  //Ändere die Adresse des Bildes
    }

  //-->
  </SCRIPT>
</HEAD>

<BODY onLoad="Init()" STYLE="BACKGROUND-COLOR:#000000; MARGIN:0px">
  <IMG ID="iBild" SRC="undefiniert" onClick="javascript:window.close()"
     ALT="Klicken Sie auf das Bild um das Fenster zu schließen.">
</BODY>

</HTML>