Popup DHTML para mostrar una imagen

  • Por
Creamos una página con una serie de enlaces que, al pulsarse, muestran unas imágenes asociadas en una capa aparte, de manera similar si se mostrasen en una nueva ventana, pero sin los inconvenientes de los popups.
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.

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

Alfredo Isaac Romero Lopez

30/6/2005
Este manual me perece super bien, es breve , practico y vastente interesante para quienes tengan interes en desarrollar una pagina interactiva.

delfina

02/3/2006
y me comento a mi misma! ya lo resolvi.
agreguen al final del archivo x_core.js la siguiente funcion, ke era la faltante:
function xInnerHtml(e,h)
{
if(!(e=xGetElementById(e)) || !xStr(e.innerHTML)) return null;
var s = e.innerHTML;
if (xStr(h)) {e.innerHTML = h;}
return s;
}

y listo!! saludos

Alex

20/4/2009
No funciona
Ante todo, gracias por el artículo.

He probado el artículo http://www.desarrolloweb.com/articulos/1631.php
y tampoco funciona. En los Cross-Browser, existe una carpeta old y parece que los anteriores ejemplos funciona.

Personalmente a mi me interesa este ejemplo en concreto y no funciona. El Cross-Browser actual es x418_xc107_z1.
Que puede fallarme?
Gracias.
Àlex

Lan

16/7/2010
Problema-Solucion con Version Nueva de X
Estoy trabajando con este ejemplo usando la version mas actual de X, pero no aparecen algunas de las funciones que tiene este ejemplo ( por lo cual me rompi la cabeza viendo por que no funcionaba =P), pero se pueden encontrar en el directorio X/lib/old, que trae ya el rar de X. : ) con eso, el ejemplo funciona de maravilla.

Antonio

24/5/2012
falta archivo?
Hola he descargado la última version de x library y provando en una página me da que falta en la carpeta X el archivo x_core.js , puede ser ? no funciona y ese archivo no lo localizo.
Si me pueden ayudar gracias.

Ivan

22/6/2012
Archivo renombrado
el archivo x_core.js se encuentra en la carpeta old de la ultima libreria aunque ha sido renombrada a x_core_n4.js Y ahi encontraran todas las funciones que explican arriba

Pablo

19/11/2018
¿se podría usar para mostrar otra pagina en html?
Me ha encantado el post, y dandole vueltas mi pregunta es, podría hacerse para que mostrara un texto en html?