Hace días estoy haciendo una web en la que tengo varios thumbnails de imágenes que necesito se vean en una ampliación en ventana aparte y encontré un script que ayudaba con eso y las imágenes que son de 1240 x 113 pixels, se abren y se ajustan a la ventana y el cursor aparece como y una lupa con la que puedo ampliar la imagen en cualquier parte que le de click y luego volverla a achicar:
<SCRIPT TYPE="text/javascript">
<!--
function openWin(page,name,width,height)
{
winOpts = 'toolbar=0,width=' + width + ',height='+ height +',directories=0,status=1,scrollbars=1,resize=1,me nubar=0,location=0,copyhistory=0'
if (navigator.userAgent.indexOf("Mac") >= 0)
{
var W = open(page,name,winOpts)
open(page,name,winOpts)
} else {
var W = open(page,name,winOpts)
}
W.creator = self;
}
//-->
</SCRIPT>
<a href="javascript
:Start('imagen.jpg', 500, 500)";>ABRE</a>
---------------------------------------------
Hasta ahí todo bien, pero luego quise darle un formato más simpático al popup y encontré un script que me ayudó y con eso pude definir el "look" final, pero el gran problema es que no consigo hacer que la imagen se ajuste y se muestre como en el script anterior y necesito que se vea así pues a muchos usuarios les molesta navegar con scrolls:
<script language="javascript" type="text/javascript">
<!--
function imapopup(pic) {
if (! window.focus)return true;
var href;
if (typeof(pic) == 'string')
href=pic;
else
href=pic.href;
var HTM = '<htm><head><title>TITULO DE IMAGEN</title></head><body topmargin="5">';
HTM += '<div style="SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; BORDER-LEFT: white 2px solid; WIDTH: 490px; SCROLLBAR-SHADOW-COLOR: #CCCCCC; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #000000; BORDER-BOTTOM: white 0px solid; SCROLLBAR-DARKSHADOW-COLOR: #CCCCCC; HEIGHT: 490px; BACKGROUND-COLOR: #ffffff"" align="center"><img src="'+pic+'" alt="Imagen Ampliada"></div></body></htm>';
HTM += '<div style="background-image: url('link-del-logo.jpg'); background-repeat:no-repeat; background-position:left bottom;" align="right" height=200><br><form><input type="button" onclick="window.close()" value=" Close Window "></form></div><br>';
preWindow=open(href,"ventana","width=500,height=55 0,top=10,left=100,toolbar=no,resizable=no,scrollba rs=no,menubar=no,directories=no,status=no,copyhist ory=no");
preWindow.document.open();
preWindow.document.write(HTM);
preWindow.document.close();
}
// -->
</SCRIPT>
<a onMouseOver="status='Ver Imagen';return true;" onMouseOut="status='';return true;" href="javascript
:imapopup('LINK-DE-IMAGEN.jpg)">Abrir Ampliacion</a>
---------------------------------------------------------
Yo no sé casi nada de script y todo lo que hago lo hago leyendo y mirando por todos lados, pero no consigo hacer lo que necesito y por eso les pido ayuda. Los popups no deben ser más grandes que el tamaño especificado (500 x 550), quisiera mantener el formato que tienen pero conseguir que la imagen se ajuste automáticamente al ancho de la ventana y luego poder hacerle click para volver a ampliarla (como el primer script)
Espero a ver si me pueden dar la mano, gracias.
