En este taller de DHTML compatible con todos los navegadores vamos a crear un sistema para mostrar imágenes al pulsar sobre un enlace. Este script nos va a servir para hacer el típico enlace para ampliar una miniatura de una imagen que se muestra en una página web. Es habitual que en una web se muestren imágenes pequeñas y al pulsar sobre ellas se nos abra una ventana secundaria o popup con la imagen a mayor tamaño. El problema de los popups, como mucha gente sabe, es que existen muchos productos que los bloquean, de modo que, para asegurarnos de que las imágenes se muestran perfectamente, merece la pena buscar métodos alternativos para mostrar ventanas que no estén basados en popups.

El ejemplo en marcha lo podemos ver en una página aparte, para hacernos una idea exacta de nuestro propósito en este taller.
Primero que nada, aclarar que este ejercicio lo vamos a hacer apoyándonos en unas librerías que contienen funciones para manejar capas de manera compatible con todos los navegadores. Esto es lo que denominamos Cross Browser y está explicado con detalle en uno de nuestros manuales: Taller de Cross-Browser DHTML

Ejercicio paso a paso

Vamos a explicar el sistema paso a paso, para que sea más fácil de entender para nuestros lectores.

Primero debemos incluir las librerías X-Library (se explican en nuestro artículo Cross-Browser. DHTML compatible con todos los navegadores y se pueden descargar desde http://www.cross-browser.com/)

<script type='text/javascript' src='../x/x_core.js'></script>

A continuación, vamos a mostrar cómo serán las capas que van a utilizarse para hacer el ejercicio.

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

   </div>
   <div id="cerrarampliacion" style="background-color:333333; 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:#ffffff;">[X] Cerrar</a>
   </div>
</div>

Como se puede ver, tenemos una capa general llamada "ampliacion", que vamos a utilizar para mostrar la imagen. Engloba otras capas que vamos a utilizar para contener el código de la imagen y para mostrar el típico botón de cerrar la ventana. Esta capa "ampliacion" está en principio oculta y la mostraremos con la imagen correspondiente cuando se pulse un enlace.

Dentro de la capa "ampliacion" vamos a tener otras dos capas. En la primera, que hemos llamado "c1", vamos a mostrar la imagen correspondiente en cada caso. En la segunda capa, llamada "cerrarampliacion" vamos a colocar un enlace para ocultar la capa, cuando el usuario no desee seguir viendo la imagen mostrada.

Luego, en la página se colocarán enlaces que servirán para mostrar la capa con las distintas imágenes. Estos enlaces tendrán la siguiente forma:

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

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

Simplemente llaman a la función Javascript muestra_imagen() enviando en los parámetros las características de la imagen a mostrar.

Funciones Javascript relacionadas

Empezaremos con la función que se encarga de mostrar la imagen que se recibe por parámetro. Básicamente, debe mostrar la imagen correspondiente en la capa llamad "c1" y luego mostrar la capa "ampliacion". En la práctica, hemos incluido también una serie de instrucciones para redimensionar el tamaño de la capa, de manera que se ajuste a las dimensiones de la imagen a contener, que variarán de una a otra.

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

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

Como detalle importante hay que destacar el modo que hemos utilizado para mostrar la imagen en la capa "c1". Lo hacemos simplemente reescribiendo el código HTML dentro de la capa, con la función xInnerHtml(), que recibe la capa afectada y el string con el nuevo código HTML que debe colocarse en la capa. Este código será simplemente la etiqueta <IMG> de la imagen, con los atributos como src, width y height extraídos de los parámetros recibidos.

Para el botón de cerrar la capa con la ampliación, lo único que hacemos es llamar a la función xHide(), que oculta la capa.

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

Con esto queda comentado el ejercicio. Mostramos a continuación su código completo, para que se pueda entender de manera más global.

<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){
   xWidth ('ampliacion',ancho + 6)
   xHeight ('ampliacion',alto + 6 + 20)
   xWidth ('c1',ancho)
   xHeight ('c1',alto)
xWidth ('cerrarampliacion',ancho)

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

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(images/cargando.gif); background-repeat: no-repeat;">
<div id="c1">

</div>
<div id="cerrarampliacion" style="background-color:333333; 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:#ffffff;">[X] Cerrar</a>
</div>
</div>

<a href="javascript:muestra_imagen('images/ancares.jpg',155,80)">Ver imagen Ancares</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>

Para finalizar, se puede ver el ejemplo en marcha.

Referencia:Todo esto se puede mejorar, para ello tenemos otro artículo,Mejorando popup DHTML para mostrar una imagen, donde vemos como centrar una capa donde se muestra una imagen, para que quede más o menos en medio del espacio de la ventana del navegado.