Mejorando el popup DHTML para mostrar una imagen

  • Por
Centramos una capa donde se muestra una imagen, para que quede más o menos en medio del espacio de la ventana del navegador.
Vamos a continuar con el ejemplo relatado en el articulo Popup DHTML para mostrar una imagen. En el anterior artículo habíamos creado un sistema para mostrar una capa, en la que colocamos una imagen. La capa siempre aparece en la misma posición absoluta de la página, que no tiene porqué ser la posición más adecuada. En este artículo vamos a aprender a posicionar la capa más o menos en el centro del espacio de la ventana del navegador, para asegurarnos que el visitante visualiza la capa en una posición adecuada.

El ejercicio, tal como lo hemos realizado, queda de la siguiente manera. Pulsar este enlace para ver el ejemplo en una página aparte.

Tal como lo habíamos programado en el artículo anterior, la capa siempre sale en el mismo lugar. El problema es si la página es muy larga y debemos hacer un scroll para ver las partes que hay más abajo. Si bajamos el scroll de la página, podría ocurrir que no se viera la capa que se acaba de abrir y que el visitante no obtenga ninguna respuesta visible. Para entender lo que quiero decir, por favor, entrar en esta página de pruebas.

Entonces, para prevenir que el usuario haya hecho scroll en la página, debemos calcular la posición de la capa y actualizarla antes de mostrarla. Lo ideal es que la capa se coloque más o menos en el centro de la ventana del navegador.

Para ello, hemos cambiado un poco el código de la función que se encarga de mostrar la imagen. Ahora hacemos uso de una serie de funciones de xLibrary que sirven para conocer el tamaño de la ventana del navegador y la posición del documento que puede variar si el usuario ha hecho scroll en la página.

El código de la función es el siguiente:

function muestra_imagen(archivo,ancho,alto){
  //xInnerHtml('c1','')
  xWidth ('ampliacion',ancho + 6)
  xHeight ('ampliacion',alto + 6 + 20 + 18)
  xWidth ('c1',ancho)
  xHeight ('c1',alto)
  xWidth ('cerrarampliacion',ancho)

  xInnerHtml('c1', '<img src="' + archivo + '" width="' + ancho + '" height="' + alto + '" border="0">')

  pos_left = parseInt((xClientWidth()-ancho+3)/2)
  pos_top = xScrollTop() + parseInt((xClientHeight()-alto)/2)
  if (pos_top<10) pos_top=10
  xMoveTo('ampliacion',pos_left,pos_top)

  setTimeout("xShow('ampliacion')",50)
}


La función que muestra la imagen está parecida a como habíamos hecho en el ejercicio anterior. Lo único que cambia es el trozo de código donde se realiza el cambio de la posición que debe llevar la capa. Para ello se utilizan algunas funciones que no habíamos visto:

  • xClientWidth(): Calcula el ancho de la ventana del navegador. Recordemos que la ventana del navegador, si no está maximizada, no tiene por qué ser igual de ancha que la pantalla del usuario.
  • xClientHeight(): Calcula la altura que tiene (height) el espacio útil del navegador. Es decir, el tamaño en pixels de altura de la ventana del navegador, sin contar con los menús, barras de botones, etc.
  • xScrollTop(): que nos devuelve el número de píxel que se ha desplazado la página hacia abajo.

La posición de la capa horizontalmente se calcula conociendo el ancho de la ventana del navegador, restándole el ancho de la página y dividiendo por 2.

La posición de la capa vertical es la suma de la posición a la que se ha desplazado la ventana con otro valor, que se obtiene de restarle al tamaño de la ventana en vertical y la altura de la imagen, dividido entre 2.

En ocasiones habíamos detectado que la posición vertical de la capa calculada se queda con valores negativos. Por ello, antes de actualizar la posición de la capa, se comprueba si la posición calculada es menor que 10 y en ese caso, se fija como 10 la posición vertical.

La posición de la capa se actualiza con la función de xLibrary xMoveTo(), que recibe el nombre de la capa que se desea mover y los nuevos valores absolutos de posición de la capa, primero la posición desde el lado izquierdo y luego desde la parte de arriba.

Un último detalle que también hemos cambiado con respecto al ejemplo anterior es que la capa ahora se muestra con un retardo de 50 milisegundos. Esto lo hacemos así porque si no, en algunos casos, se apreciaba como se desplazaba la capa a la nueva posición. Con este retardo, cuando se muestra la capa, la posición ya se encuentra perfectamente actualizada, por lo que aparece ya en el lugar deseado.

Esperamos que estos cambios puedan hacer más útil el script de muestra de imágenes. Se puede ver un ejemplo del uso de este script en una página aparte.

Este código lo hemos utilizado en una de las páginas creadas por el equipo de DesarrolloWeb.com. La página en concreto es Estilo y Moda y podemos ver el funcionamiento del script en las páginas con artículos, que tienen imágenes y algunas se pueden ampliar. Con la capa se muestran las ampliaciones.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

gabriel guzman

24/7/2006
Me gusto el codigo, pero me da un error cuando lo ejecuto, especificamente en esta linea: xInnerHtml('ventanin','<img src="' + archivo + '" width="' + ancho + '" height="' + alto + '" border="0">')

Me dice que "Se esperaba un objeto"

Que puede ser? lo estoy probando en internet explorer

José Mauricio Morales

27/7/2006
Lo que tenes que hacer es descargar las librerias desde el sitio www.cross-browser.com y compilar tu codigo, es una vaina bastante complicada, pero al fina te sale..

byweb

01/12/2006
Pues yo me descarge las librerias y todo y a mi esto no me funciona, no sé por que.No se me abre ni la ventana siquiera.

José

04/2/2008
Hola, buenas tardes.

Estoy intentando crear una pagina y he encontrado interesante este script, pero una vez descargada la libreria y instalada en la root, sigue sin mostrarme las imagenes en ninguno de los dos navegadores que utilizo.

sabeis si hay algun otro sistema para mostrar las imagenes en la pantalla, en caso afirmativo, cual?, si no donde puedo tener el fallo.
Gracias.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Ventana para carga de una imagen</title>
<script type='text/javascript' src='x/x_core.js'></script>
<script type='text/javascript'>


function muestra_imagen(archivo,ancho,alto){
//xInnerHtml('c1','')
xWidth ('ampliacion',ancho + 6)
xHeight ('ampliacion',alto + 6 + 20 + 18)
xWidth ('c1',ancho)
xHeight ('c1',alto)
xWidth ('cerrarampliacion',ancho)


xInnerHtml('c1','<img src="' + archivo + '" width="' + ancho + '" height="' + alto + '" border="0">')

pos_left = parseInt((xClientWidth()-ancho+3)/2)
pos_top = xScrollTop() + parseInt((xClientHeight()-alto-300)/2)
//if (pos_top>150) pos_top = 150
if (pos_top<10) pos_top=10
xMoveTo('ampliacion',pos_left,pos_top)


setTimeout("xShow('ampliacion')",50)
}

function cerrar_ampliacion(){
xHide('ampliacion');

}

</script>
</head>

<body>

<div id="ampliacion" style="padding:2 2 2 2px; position:absolute; left: 200px; top: 100px; visibility: hidden; border: 1px solid #666666; background-image: url(cargando.gif); background-repeat: no-repeat;">

<div id="cerrararriba" style="font-weight:bold; background-color:#C3CEF5; font-family:arial,verdana; font-size:8pt; line-height:18px; height: 18px; padding-left:5px; text-align:left;">
<a href="javascript:cerrar_ampliacion()" style="color:333333;">[ X ]</a>
</div>

<div id="c1">
</div>

<div id="cerrarampliacion" style="font-weight:bold; background-color:#DBDDCD; font-family:arial,verdana; font-size:8pt; line-height:20px; text-align:right;float:right; height: 20px; padding-right:5px;">
<a href="javascript:cerrar_ampliacion()" style="color:#333333;">Cerrar esta ventana</a>
</div>
</div>

<a href="javascript:muestra_imagen('aurelia.jpg',350,200)">Ver imagen Aurelia</a>
<br>
<br>

<a href="javascript:muestra_imagen('images/basel.jpg',155,80)">Ver imagen Basilea</a>
<br>
<br>

<a href="javascript:muestra_imagen('images/dwlogo-blanco-6.jpg',97,40)">Ver logo de desarrolloweb</a>
<br>
<br>

<a href="javascript:muestra_imagen('images/cabra.jpg',266,250)">Ver una cabrita</a>
<br>
<br>
<a href="javascript:muestra_imagen('images/madridbanco.jpg',252,207)">Imagen de Madrid</a>

</body>
</html>

Luis Alfonso Vásquez Tafur

18/3/2016
Pregunta
La funcion esta perfecta para abrir al hacer clic... Pero como hago para que abra automaticamente al abrir la pagina sin hacer clic a nada?