Bild in einem Popup öffnen und dabei die Fenstergröße automatisch anpassen

Sprache: Deutsch
Programmiersprache: JavaScript
Veröffentlicht von: Thomas
Letzte Änderung: 12.05.2006
Aufrufe: 3025

Lizenz: BSD-Lizenz

Beschreibung

Das Script öffnet ein Popupfenster, in dem ein Bild angezeigt wird - die Fenstergröße passt sich dabei automatisch der Größe des Bildes an.

Code

Zeilennummern anzeigen

1 // Opener.htm 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml" > 5 <head> 6 <title>Aufruf:</title> 7 <script type="text/javascript"> 8 function ShowPicture() 9 { 10 window.open('', 'pictureBox', 'width=1,height=1,resizable=no,scrollbars=no,statusbar=no'); 11 } 12 </script> 13 </head> 14 <body> 15 <ul> 16 <li><a href="pic.htm?pic=http://www.snippetcenter.org/Library/Media/Page/logo_pages.png" target="pictureBox" onclick="ShowPicture()">snippetcenter.org Logo</a></li> 17 <li><a href="pic.htm?pic=http://www.fineworker.de/images/fleiss.jpg" target="pictureBox" onclick="ShowPicture()">falsche Biene</a></li> 18 <li><a href="pic.htm?pic=http://www.spiegel.de/img/0,1020,624764,00.jpg" target="pictureBox" onclick="ShowPicture()">Zwangsabstieg</a></li> 19 </ul> 20 </body> 21 </html> 22 23 // Pic.htm 24 25 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 26 <html xmlns="http://www.w3.org/1999/xhtml" > 27 <head> 28 <title>Picture</title> 29 <style type="text/css"> 30 body { margin: 0px; padding: 0px } 31 </style> 32 </head> 33 <body> 34 <a href="javascript:window.close()"><img src="" id="image" alt="" border="0" /></a> 35 <script type="text/javascript"> 36 37 // Wichtig: das Script muss nach dem Image-Tag platziert werden, da vorher 38 // das Objekt "image" noch nicht bekannt ist. Und da der Spaß prozedural 39 // durchläuft müssmer das Image also erst erstellen. 40 41 // Bildnamen holen 42 var queryString = window.location.search.replace('?pic=', ''); 43 44 // Bild zuweisen 45 document.getElementById('image').src = queryString; 46 47 // Bild-Breite und Bild-Höhe holen 48 var width = document.getElementById('image').width + 6; 49 var height = document.getElementById('image').height + 55; // dazu für Statusbars der Browser 50 51 // Und Resize 52 window.resizeTo(width, height); 53 54 </script> 55 </body> 56 </html>

Noch kein Kommentar vorhanden

Dieses Snippet kommentieren

Name *

E-Mail (wird nicht angezeigt) *

Website

Kommentar *

Sicherheitscode *