nicht angemeldet
Hallo zusammen,
für die Bildergalerie auf meiner Seite habe ich ein Script geschrieben, dass nach einem Klick auf ein Thumbnail das zugehörige Bild vergrößert in einem "PopUp" Fenster anzeigt.
Nachdem ich es nun geschafft habe, dass sowohl in Mozilla, als auch Opera und IE dieses PopUp an die Größe des Bildes angepasst wird und es auch noch focussiert wird, scheitere ich an folgendem Problem:
Bei Klick auf das Thumbnail wird das Fenster geöffnet, allerdings nur in der Größe des Formularfeldes "Fenster schliessen". Bei einem zweiten Klick auf das Thumbnail wird das Fenster in gewünschter Größe ausgegeben. Daraus schließe ich, dass das Fenster erst richtig erscheint, wenn das jeweilige Bild im Cache hinterlegt ist.
Wie kann ich es erreichen, dass das PopUp Fenster schon beim ersten Klick in der gewünschten Größe erscheint?
Hier das Script:
<html>
<head>
<!--Datei-Informationen-->
<link rel="stylesheet" type="text/css" href="../traum.css">
<script type="text/javascript">
<!-- Begin
function PictureOpen(img){
Bild = new Image();
Bild.src = (img);
Bild.onLoad = Show(img);
}
function Show(img){
var copy = "© 2004 andy-blackjack.de";
var xsize = Bild.width+50;
var ysize = Bild.height+105;
var ScreenWidth = screen.width;
var ScreenHeight = screen.height;
var xpos = (ScreenWidth/2)-(xsize/2);
var ypos = (ScreenHeight/2)-(ysize/2);
if (ysize>ScreenHeight) ysize=(ScreenHeight-100);
var para = "width="+xsize+",height="+ysize+",left="+xpos+",top=5,scrollbars=1,resizable=1,location=0,directories=0,status=0,menubar=0,toolbar=0";
var NewWindow = window.open("Fotogalerie","img",para);
NewWindow.document.open ()
NewWindow.document.write ("<html><head><title>Fotogalerie</title></head>");
NewWindow.document.write ("<body bgcolor='#fffff1' topmargin=3 leftmargin=1 onLoad='focus()' onBlur='self.close()'>");
NewWindow.document.write ("<form><table align=center cellspacing='0' cellpadding='5' border='0'><tr>");
NewWindow.document.write ("<td align='center' valign='top' bgcolor='#fffff1'>");
NewWindow.document.write ("<table border='1' cellpadding='0' cellspacing='1' style='background-image: url(");
NewWindow.document.write (img);
NewWindow.document.write (")' width='");
NewWindow.document.write (Bild.width);
NewWindow.document.write ("' height='");
NewWindow.document.write (Bild.height);
NewWindow.document.write ("'>");
NewWindow.document.write ("<tr>");
NewWindow.document.write ("<td width='100%' align='right' valign='bottom'><b><font face='Verdana' size='2' color='#F0F0F0'>");
NewWindow.document.write (copy);
NewWindow.document.write (" </font></b></td>");
NewWindow.document.write ("</tr></table>");
NewWindow.document.write ("</td></tr><tr>");
NewWindow.document.write ("<td align='center'>");
NewWindow.document.write ("<table border='0' cellpadding='3' cellspacing='0' width='100%'><tr>");
NewWindow.document.write ("<td width='50%' align='center'><input type='button' value='FENSTER SCHLIESSEN' style='font-family: Verdana; font-size: 10px; width: 150' onClick='self.close()'></td>");
NewWindow.document.write ("</tr></table>");
NewWindow.document.write ("</td></tr></table></form>");
NewWindow.document.write ("</body></html>");
NewWindow.document.close();
NewWindow.resizeTo(xsize,ysize);
return false;
}
// End -->
</script>
</head>
<body>
<a href=../bilder/traumaq1.jpg onClick="PictureOpen(this.href);return false;" target="_blank">
<img src="../bilder/traumaq1_kl.jpg" alt="Das erste Foto, am 05.03.2002 per Mail erhalten" border="0" width="154" height="115">
</a>
</body>
</html>
Nach langem Suchen bin ich auf den Onload-Event gekommen, aber der scheint mein Problem auch nicht zu lösen.
Wäre nett, wenn mir hier jemand helfen könnte.
Grüße aus dem Bayerischen Wald,
Andreas