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.