Vamos a realizar otro cambio en nuestro sitio, de momento, también sólo en la página silvestres.html.
Conforme lo tenemos hasta ahora, al hacer clic sobre una imagen, se muestra la imagen grande.
Lo que queremos, es que en vez de sólo la imagen, se abra una nueva ventana, que tenga como título de la página, en el title y en un h1, el nombre de la flor. Y un enlace para cerrar la ventana. Una solución sería crear una página como queremos. Pero si lo hacemos manualmente, tenemos que crear una página para cada fotografía. Lo que vamos a hacer es generar esa página en el momento que la necesitemos, utilizando JavasScript.
Como esto lo vamos a hacer con cada imagen, crearemos una función. Como cada imagen es de una flor distinta, a la función tendremos que pasarle como parámetros el nombre de la flor, y el archivo de imagen que tiene que mostrar. Como todas las flores están en la carpeta fotos, vamos a crear la variable carpeta en la función, para tener que pasarle sólo el nombre. Así, si cambiamos la carpeta, sólo tendremos que cambiarlo en un sitio. Declaramos nuestra función, debajo de las que ya teníamos.
function verImagen (nombre, imagen){
carpeta = 'fotos/';
}
Para abrir una ventana nueva, podemos valernos del objeto window. Este objeto, nos permite crear una ventana, y abrirla con el método open. Un método, es como una función que está dentro del objeto. A open, le podemos pasar como parámetro la página que queremos abrir. Si, le pasamos una imagen, también la abrirá. Vamos a probarlo:
function verImagen (nombre, imagen){
carpeta = 'fotos/';
window.open(carpeta+imagen);
}
Vamos a probarlo con la imagen de la flor de Agret. Lo vamos a hacer en el atributo onclick del enlace, aunque lo podríamos haber hecho también sobre la miniatura. Lo que sí tenemos de quitar es el atributo href del enlace:
<a href="#" onclick="verImagen('Agret - Oxalis pes-capra', 'agret.jpg');"><img /></a>
Si lo pruebas, comprobarás que se abre una nueva ventana. Podemos utilizar window.open('url') para abrir cualquier página o dirección.
Lo que vamos a hacer es, en vez de abrir directamente la imagen, abrir una ventana vacía, y escribir en ella el código que queramos. Dentro de la función, escribimos el código a mostrar, con los parámetros. Podemos utilizar una variable, por ejemplo:
carpeta = 'fotos/';
codigo = '<html>\n<head>\n<title>'+nombre+'</title>'+
'\n</head>\n<body>\n<h2>'+nombre+'</h2>'+
'\n<img src="'+carpeta+imagen+'" alt="'+nombre+'" title="'+nombre+'" />\n'+
'</body>\n</html>';
Observa que hemos escrito el código de la página tal cual, concatenando los parámetros con el signo + donde nos hacía falta. Cada cadena viene delimitada por comillas simpes '. No podemos saltar de línea a mitad de una cadena, debemos de cerrarla en la misma línea, aunque sí podemos concatenar con la línea siguiente. De todas formas, estos saltos no se verán en el código fuente de la página generada. Por eso hemos puesto el carácter de escape \n, que generará un salto de línea. Esto es puramente estético, podríamos quitar estos saltos sin que afecten al resultado.
Como no sólo vamos a abrir la ventana, si no que vamos a utilizar sus métodos, debemos de asignar la ventana a una variable (por ejemplo, ventana). En vez de abrir la imagen, la abrimos en blanco (window.open()). Una vez abierta, vamos escribimos el código en su documento, utilizando el método write del document de la nueva ventana (ventana.document.write(codigo)). Podemos escribir varias veces, pero cuando terminemos tenemos que cerrarlo con el método close (ventana.document.close).
ventana = window.open();
ventana.document.write(codigo);
ventana.document.close();
Si lo pruebas, verás el h2 y el título de la página en la ventana del navegador.
Ahora sólo nos queda complicar un poco más el código HTML de la página generada. Por ejemplo, le podemos adjuntar la hoja de estilo. Además, después de la imagen, le vamos a añadir un enlace que cierre le ventana, utilizando el método close de window (window.close();). Así nos ha quedado:
function verImagen (nombre, imagen){
carpeta='fotos/';
codigo = '<html>\n<head>\n<title>'+nombre+'</title>\n'+
'<link rel="stylesheet" href="../estilo.css" type="text/css" />\n'+
'\n</head>\n<body>\n'+
'<div style="text-align:center;"><h2>'+nombre+'</h2>'+
'\n<img src="'+carpeta+imagen+'" alt="'+nombre+'" title="'+nombre+'" />\n'+
'<p><a href="#" onclick="window.close();">[Cerrar]</a></p>'+
'</div></body>\n</html>';
ventana = window.open();
ventana.document.write(codigo);
ventana.document.close();
}
Ahora, sólo nos queda cambiar los enlaces de la página para que llamen a la función.
En este apartado hemos utilizado los objetos del navegador window y document. Existen otros objetos del navegador, que puedes ver en este avanzado 
.
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.