Mostrar imagen en el mismo lugar, y abrir ventana

coke_135 · #1 (**permalink**) 01/09/2004, 18:33

Hola:

Necesitaba un script que me cambiara una imagen en un lugar de la web al hacer click en un vinculo. Después de buscar un poco, encontré esta web con un ejemplo que se ajustaba perfectamente a lo que quería:

Web: Cambiar Imagenes
Ejemplo: Ejemplo Web

:: Si lee esto el creador, ¡gracias! ::

El caso es que busco algo más, que he intentado lograr por mi mismo, pero me ha resultado imposible (novatillo que es uno). Quiero, que en la misma imagen que va cambiando, al hacer click se haga un open.window o similar para ver la imagen a mayor tamaño en otra ventana.

El código original es este:

Código:

<html>
<head>
<title>Tutorial DHTML - Cambiar Imagenes - Ejemplos(2)</title>

<script language="JavaScript">

function PreCarga (objetoImagen, rutaImagen) 
{
    if (document.images)
    {
	eval (objetoImagen +' = new Image()')
	eval (objetoImagen +'.src = "' + rutaImagen + '"')
    }
}

function CambiarImagen (capa,nombreImagen,objetoImagen) 
{
    if (document.layers && capa!=null)
	eval('document.' + capa + '.document.images["' + nombreImagen + '"].src = ' + objetoImagen + '.src')
    else
	document.images[nombreImagen].src = eval(objetoImagen + ".src")
}

PreCarga ('Interrogante','../../graficos/interrogante.gif')
PreCarga ('Despertador','../../graficos/despertador.gif')

</SCRIPT>
</HEAD>

<body>

<center> <H2>Cambiar Im&aacute;genes</H2> </center>

<a href="JavaScript:CambiarImagen ('divImagen','miImagen','Interrogante')">Cambiar a imagen del Interrogante</a> <br>
<a href="JavaScript:CambiarImagen ('divImagen','miImagen','Despertador')">Cambiar a imagen del Despertador</a>

<div ID="divImagen" style="position:absolute; left:50; top:200; width:75;">
	<img name="miImagen" src="../../graficos/interrogante.gif">
</div>

</body>
</html>

Se qué lo que debo modificar es el añadido de un <a href> en el <div> final, pero no se como hacer que este cambie con cada foto, y no sea siempre el mismo. Supongo que se podrán usar las variables de arriba, ¿no?

A ver quien puede ayudarme. ¡Gracias!

soniagrande · #2 (**permalink**) 02/09/2004, 06:28

Lo que puedes hacer es que cuando pinchan sobre la foto llame a una funcion javaScript:

Código:

<div ID="divImagen" style="position:absolute; left:50; top:200; width:75;">
	<a href="javascript:mostrarImagen()"><img name="miImagen" src="1.gif" border="0"></a>
</div>

La funcion lo que hace es abrir una ventana cuya direccion es la que tenga en ese momento la imagen llamada miImagen:

Código:

function mostrarImagen(){
	window.open(document.getElementById("miImagen").src,'', 'dialogWidth: 34; dialogHeight: 25; resizable: no; help: no; status: no; scroll: no');
}

coke_135 · #3 (**permalink**) 02/09/2004, 06:44

Muchas gracias soniagrande, pero tengo un problema. Me funciona en Explorer pero no en Firefox...

Pensaba que sería por el anti pop-ups pero no es así. ¿Que puede ser?

¡Gracias!

soniagrande · #4 (**permalink**) 03/09/2004, 01:07

Puede ser que en firefox no funcione lo de document.getElementById, he modificado esa parte de la funcion, que ahora es asi:

Código:

function mostrarImagen(){
	window.open(document.images['miImagen'].src,'', 'dialogWidth: 34; dialogHeight: 25; resizable: no; help: no; status: no; scroll: no');
}

En IE sigue funcionando, pero en Firefox no lo se porque no puedo probarlo, si esto no funciona asi pues no se me ocurre como hacerlo para que funcione en Firefox

coke_135 · #5 (**permalink**) 03/09/2004, 14:40

Perdón por tardar en contestar...

Ahora si que funciona, muchas gracias soniagrande, pero el problema es que quería que al abrirse, abrir la imagen más grande, es decir, digamos que una imagen distinta. De esta forma abro una ventana con la misma imagen, con el mismo tamaño, pero quiero abrir una ventana con la imagen a mayor resolución.

Gracias por la ayuda.

Un saludo

claray · #6 (**permalink**) 03/09/2004, 16:17

alo? disculpen que me meta...

Se me ocurre que tendrías que buscar una manera de relacionar el nombre de la foto chica con la foto grande que quieres se muestre en el popup. por ejemplo si la foto chica se llama a.gif, la grande deberias nombrarla a.gif.gif (es un ejemplo, ok?) y asi seria muy facil relacionarla no te parece.

Otra forma, si conoces los nombres de las imagenes previamente es crear un arreglo en javascript mediante los cuales puedas hacer esa relacion.

saludos.

soniagrande · #7 (**permalink**) 06/09/2004, 00:51

Efectivamente como dice Claray lo que tienes que hacer es relacionar las dos imagenes de alguna manera, esta funcion lo que hace es mostrar en grande una imagen que se llama exactamente igual pero añadiendo una g en el nombre y tiene la misma terminacion, por ejemplo para la foto 1.gif la grande seria 1g.gif:

Código:

function mostrarImagen(){
	var url = document.images['miImagen'].src;
	var indice = url.lastIndexOf(".");
	var urlNueva = url.substring(0, indice);
	var terminacion = url.substring(indice);
	urlNueva += "g"+terminacion;
	window.open(urlNueva,'', 'dialogWidth: 34; dialogHeight: 25; resizable: no; help: no; status: no; scroll: no');
}

Esta es una de las posibilidades, tambien puedes ponerlas con el mismo nombre en directorios diferentes (para eso ya solamente tienes que jugar con la url de la foto y cambiar el nombre de un directorio por otro) ...