JavaScript - Bild in separatem Fenster öffnen

index Anfang rückwärts vorwärts runter
Das aufgelistete Beispiel demonstriert das Öffnen eines separaten Fensters, das Beschreiben mit HTML-Inhalt, in dem sich ein Bild befindet und die Abfrage verschiedener Bildeigenschaften.

Beispiel ansehen

Querverweise zum Verständnis : [Einbindung in HTML] [Spezifikation Funktionen] [Objektreferenz window] [Objektreferenz document] [Objektreferenz images]

Im folgenden Quelltext sind wichtige Bereiche grün und Kommentare gelb markiert.
index Anfang rückwärts vorwärts hoch runter 
<html>
<head>

<script type="text/javascript">
<!--

var picwin=0;                    /* globale picwin-Variable */


/* Fenster schliessen: ------------------------------------ */
function close_picture()
{
  if (picwin)                              /* wenn existent */
    if (!picwin.closed)                  /* wenn noch offen */
      picwin.close();                            /* mach zu */
}


/* Fenster oeffnen: --------------------------------------- */
function open_picture(picname,bgcolor)
{
  close_picture();                               /* mach zu */
  if (!bgcolor)
    bgcolor="#FFFFFF";               /* Standardwert: weiss */
  picwin=open("","picwin","width=100,height=100,resizable=yes,status=no,toolbar=no,menubar=no,location=no,scrollbars=yes");
                                       /* Dokument oeffnen: */
  picwin.document.open("text/html","replace");
                                     /* Dokument schreiben: */
  picwin.document.write("<html>\n<head>\n");
  picwin.document.write("<title>"+picname+"</title>\n");
  picwin.document.write("</head>\n");
    /* Benachrichtigung des opener-Fensters nach dem Laden: */
  picwin.document.write("<body onLoad=\"opener.picture_size(window,0)\"");
  picwin.document.write(" style=\"background:"+bgcolor+"; margin:0px; padding:10px;\">\n");
                                       /* Bild reinbasteln: */
  picwin.document.write("<p align=center><img src=\""+picname+"\" hspace=\"0\" vspace=\"0\"></p>");
  picwin.document.write("</body>\n</html>");
                                    /* Dokument schliessen: */
  picwin.document.close();
}


/* Fensterdaten evaluieren und Fenstergroesse setzen: ----- */
function picture_size(picwin,imgnum)
{
  var output;
  var image=picwin.document.images[imgnum];
                  /* falls Bild noch nicht fertig - warten: */
  if (image.width<1)
  {
    this.setTimeout("picture_size(picwin,"+imgnum+");",200);
    return;
  }
                  /* Fenstergroesse und Fensterlage setzen: */
  picwin.resizeTo(image.width+50,image.height+80);
  picwin.moveTo((screen.width-image.width-50)/2,(screen.height-image.height-50)/2);
                                     /* Zeichenkette bauen: */
  output="src: "+image.src+"\n\n";
  output+=" width: "+image.width+"\n";
  output+="height: "+image.height+"\n";
                                          /* Output setzen: */
  document.form1.imagedata.value=output;
                                      /* Fenster nach vorn: */
  picwin.focus();
}

//-->
</script>

</head>
&t;body
  bgcolor="#FFFFFF"
  text="#000000"
  link="#0000CC" vlink="#330066" alink="#990000"
  onUnLoad="close_picture()"
>

<a href="openpic.html">Erkl&auml;rung</a><br>
  <!-- Link zurueck auf move.html -->

<br>

  <!-- Bilder laden: -->
<a href="javascript:open_picture('droeppez.gif','#E0E0FF')">Dr&ouml;ppez</a><br>
<a href="javascript:open_picture('gras.gif')">Fraktal (IFS)</a><br>
<a href="javascript:open_picture('haunebu.jpeg')">UFO made in Germany</a><br>

<br>

  <!-- Ausgabefeld fuer Bilddaten: -->
<form name="form1">
<textarea name="imagedata" rows="7" cols="50" wrap="virtual" readonly></textarea>
</form>

</body>

</html>
index Anfang rückwärts vorwärts hoch
Autor: Ulrich Kritzner