|
|
|
Resize Popup Window to an image |
|---|
| message from cavecrazy on 20 Jul 2004 |
I am looking for a simple script that will resize a browser window to an image.
I currently have a script but I am not for sure what I have done wrong. I have
a 100x100 thumbnail image then want to have a link that will open the larger
../images/Burning-Bush.gif. Would the link be
javascript:showPic('../images/Burning-Bushlg.gif','Burning Bush,
landscape',0,0,'#993333','#ffffcc') instead of the Burning-Bush.gif? The
Burning-Bushlg.gif is the larger image of the bush. I have enclosed the code
that I am using. If anyone has a simpler script or can offer me detailed advice
I would appreciate it. Thanks.
PLACED IN HEAD
<script language="JavaScript">
function showPic( imgName, imgCaption, imgWidth, imgHeight, textColor, bgColor
) {
if(imgWidth<=100)imgWidth=100
if(imgHeight<=100)imgHeight=100
winHeight=imgHeight+20;
w =
window.open('','Demo','toolbar=no,location=no,directories=no,status=no,scrollbar
s=no,resizable=yes,copyhistory=no,width='+imgWidth+',height='+winHeight);
w.document.write( "<html><head><title>"+imgCaption+"</title>" );
w.document.write( "<STYLE TYPE='text/css'>" );
w.document.write( "A {font-family: verdana; font-size: 10px; color:
"+textColor+"; text-decoration : none;}" );
w.document.write( "A:Visited {font-family: verdana;font-size: 10px; color:
"+textColor+"; }" );
w.document.write( "A:Active { font-family: verdana; font-size: 10px; color:
"+textColor+"; }" );
w.document.write( "A:Hover { font-family: verdana; font-size: 10px; color:
"+textColor+"; }" );
w.document.write( "IMG {border-color : "+textColor+";}" );
w.document.write( "BODY { font-family: verdana; font-size : 10px;
font-weight: normal; color : "+textColor+"; background-color : "+bgColor+"; }"
);
w.document.write( "</STYLE>" );
w.document.write( "<script language='JavaScript'>\n");
w.document.write( "IE5=NN4=NN6=false\n");
w.document.write( "if(document.all)IE5=true;\n");
w.document.write( "else if(document.getElementById)NN6=true\n");
w.document.write( "else if(document.layers)NN4=true\n");
w.document.write( "function autoSize() {\n");
w.document.write( " if(IE5)
self.resizeTo(document.images[0].width+10,document.images[0].height+31+25)\n");
w.document.write( " else if(NN6) self.sizeToContent()\n");
w.document.write( " else
top.window.resizeTo(document.images[0].width,document.images[0].height+25)\n");
w.document.write( " self.focus()\n");
w.document.write( "}\n</scr");
w.document.write( "ipt>\n");
w.document.write( "</head><body leftmargin=0 topmargin=0 marginwidth=0
marginheight=0 onLoad=" );
w.document.write( "'javascript:autoSize();'>" );
w.document.write( "<table cellpadding=0 cellspacing=0 border=0><tr><td
colspan=3><img src='"+imgName+"' border=0 alt='"+imgCaption+"'></td></tr>" );
w.document.write( "<td align='right'><a
href='javascript:top.window.close();'>close window</a> </td></tr>" );
w.document.write( "</table></body></html>" );
w.document.close();
}
</script>
Placed in Body
<a href="javascript:showPic('../images/Burning-Bush.gif','Burning Bush,
landscape',0,0,'#993333','#ffffcc')"><img src="../images/Burning-Bush.gif"
alt="Burning Bush" width="100" height="100" border="0"></a
|
| Mad Dog replied to cavecrazy on 19 Jul 2004 |
Check out these two extensions (which do pretty much the same thing).
They'll open a graphic and automatically hug the edges, which is what you're
trying to do.
Open Picture Window Fever - www.dreamweaverfever.com/grow/
Just So Picture Window - www.valleywebdesigns.com/vwd_dw_JSPW.htm
MD
cavecrazy wrote:
window.open('','Demo','toolbar=no,location=no,directories=no,status=no,scrol
lbar
self.resizeTo(document.images[0].width+10,document.images[0].height+31+25)\n
");
top.window.resizeTo(document.images[0].width,document.images[0].height+25)\n
|
|
