Mostrar imágenes con DHTML
En este artÃÂculo les pongo un código que usa DHTML (Dynamic HTML) usando Javascript y sirve para ver una imagen centrada en una ventana.
Esto se compone por dos partes, la primera es la liga que apunta al archivo foo.htm y le dice qué archivo mostrar. La segunda es el archivo foo.htm que muestra la imagen y centra la ventana.
primero.htm
<HTML>
<HEAD>
<SCRIPT language=”javascript”>
<!–
function showimg(vImage) {
window.open(”foo.htm?” + vImage,
“winimgpreview”,
“location=no, menubar=no, scrollbars=no, toolbar=no, resizable=no, height=200, width=200″);
}
–>
</SCRIPT>
</HEAD>
<BODY>
<A href=”#” onclick=”javascript:showimg(’laimagen.jpg’); return false;”>La imagen</A>
</BODY>
El primer archivo llama a una función showimg con el parámetro imagen, ahi escribimos el source de la imagen que queremos mostrar. La función abre una nueva ventana bloqueando casi todas las propiedades.
segundo.htm
<HTML>
<HEAD>
<STYLE>
BODY {MARGIN: 0px; PADDING: 0px; BACKGROUND-COLOR: #FFFFFF;}
</STYLE>
<SCRIPT language=”javascript”>
<!–
function putimage() {
newsrc = new String( document.location.search );
newsrc = newsrc.substr(1, newsrc.length – 1);
var imgidx = document.getElementById(”imgid”);
imgidx.src = newsrc;
return true;
}
function resizewindow() {
var imgidx = document.getElementById(”imgid”);
if (imgidx.width == 0 || imgidx.height == 0) {
window.setTimeout(”resizewindow()”, 250);
return false;
}
addHeight = 25;
window.resizeTo( imgidx.width, imgidx.height + addHeight );
wleft = (window.screen.availWidth – imgidx.width) / 2;
if (wleft < 0) wleft = 0;
wtop = (window.screen.availHeight + addHeight – imgidx.height) / 2;
if (wtop < 0) wtop = 0;
window.moveTo(wleft ,wtop);
return true;
}
function cancelproc() {
window.close();
return false;
}
–>
</SCRIPT>
</HEAD>
<BODY onload=”javascript:putimage();”>
<TABLE width=”100%” height=”100%” align=”center” cellpadding=”0″ cellspacing=”0″>
<TR><TD><DIV><IMG id=”imgid” onload=”javascript:resizewindow();” onerror=”cancelproc();”></DIV></TD></TR>
</TABLE>
</BODY>
</HTML>
El segundo archivo recibe por el querystring (lo que viene en una URL después del “?”) la url de la imagen, de hecho le podemos enviar cualquier src de imagen válido. El archivo contiene una tabla definida con un alto y ancho de 100%, esto es para que si la imagen es más pequeña que el alto de la ventana se vea centrada de todas formas.
Cuando el evento onload de la página se activa se manda llamar la función putimage, esta función toma el querystring de la propiedad document.location.search y asàsabe qué archivo tomar.
Posteriormente se establece la propiedad src del elemento IMG contenido en la tabla, este elemento IMG tien el id imgid, asàlo podemos encontrar y después manipularlo. Asimismo, este elemento tiene el evento onload asignado a la función resizewindow.
La función resizewindow va a acomodar el tamaño de la ventana a la imagen, esto es tomando sus propiedades width y height, siempre que estén disponibles, si no lo están se vonverá a llamar a la imagen en una segunda ocasión y asàhasta que estén disponibles. Una vez disponibles solo acomoda el ancho y el alto (alto + una x cantidad de pixeles, por la barra de tÃÂtulo de la ventana) y centra la ventana en el escritorio, si la ventana es mayor a las dimensiones del escritorio entonces la posiciona en la coordenada 0, 0.
Esta función es muy práctica cuando deseamos mostrar una imagen en tamaño grande en forma de popup. Espero les sea de utilidad.
eclipxe :: Carlos C Soto
Escrito por 
