MOstrar imagen cambiante ampliada en celda

[Ellyza]

Hola a todos los maestros,
Espero que esta pregunta corresponda a este foro.
Mi problema es el siguiente, en una tabla tengo tres imágenes reducidas y necesito que, al hacer click sobre ellas, se muestren a tamaño natural en otra tabla de la misma página, ¿Cómo podría hacerlo?
Les anticipo que no tengo apenas conocimientos de javascript.
Muchas gracias de antemano.

[tunait]

Hola Ellyza,

dime, las imágenes reducidas son las grandes mostradas en pequeñito o son copias en pequeño (thumbnails)??

[Ellyza]

Hola tunait, las imágenes son copias en pequeño.

[tunait]

Pues siendo sólo 3 imágenes se puede hcaer de forma bastante sencilla,

podrías usar algo así


<img src="imagenPeque1.jpg" onclick="document.getElementById('visor').src='ima genGrande1.jpg'">


<img src="imagenPeque2.jpg" onclick="document.getElementById('visor').src='ima genGrande2.jpg'">

<img src="imagenPeque3.jpg" onclick="document.getElementById('visor').src='ima genGrande3.jpg'">

Y a la tabla donde haya de mostrarse la imagen grandota le pones una imagen inicial (si no quieres que se vea nada usa una imagen transparente)

<img src="imageninicial.jpg" id="visor">

Es importante que a ésta última (visor) no le dés dimensiones (width y height)

[caricatos]

Hola Ellyza:

Te diré como lo haría yo, -con el permiso de tunait ( ) - suponiendo que las imágenes no tuvieran las mismas dimensiones (si fueran iguales también valdría).

En la celda pondría una capa con dimensiones iguales o incluso mayores que la máxima dimensión... ... por ejemplo, si la altura máxima fuese 100, le pondría un height de al menos 100.
Luego en la capa le pondría estilos para imágenes que se centrasen, y no se repitiesen (style='background-position:center center; background-repeat: no-repeat;')
Por último pondría un script en las miniaturas que asignaran una imagen de fondo a la capa.
Voy a poner el código "a capela":
<table ><tr><td ><img src=miniatura1.gif onclick='document.getElementById("grande").style.b ackgroundImage = url(mayor1.gif)'></td>
...

... y la celda mayor:
<tr><td><div id=grande style="width:200; height:120;background-repeat: no-repeat; background-position: center center"></div></td>...

Espero que te sirva.

[caricatos]

tunait
Tanto tiempo sin chocar...

Un saludete.

[Ellyza]

Muchas gracias Tunait, justo lo que quería.
Y ahora, si no es mucho pedir como puedo imprimir sólo la imagen grandota.

Un saludo.