Utiliza una función para abrir una nueva ventana (que es la que contiene la imagen más grande)
<script>
function zabaldu(pag) {
window.open(pag + ".htm","","
aqui las propiedades");
};
</script>
y luego llamas a la función desde la propia imagen (o desde la fila o celda que la contiene, p.ejem.):
<img src="fotouno.jpg" onclick="zabaldu('paginafoto2')" ...>
En el window open puedes definir las propiedades como tamaño, posición, si tiene barra de título, scroll, etc. de la nueva ventana o hacerlo en la propia ventana nueva.
Para que abra la imagen directamente en el navegador, en vez de llamar a una nueva página (lo que te ahorra trabajo, aunque quede un poco mas feo), simplemente pon en la imagen:
<img src="fotouno.jpg" href="fotodos.jpg" ...>
En ambos casos, te aconsejo que utilices también los eventos onmouseover y onmouseout para indicar al usuario que la cosa es clicable, por ejemplo, haciendo que salga la manita al pasar por encima:
<img ... onmouseover="document.body.style.cursor='hand'" ...
... onmouseout="document.body.style.cursor='default'" ...>
Tampoco estaría de más que pusieras un texto alt invitando a clicar y explicando lo que ocurre:
<img ... alt="Pinche sobre la imagen para verla ampliada ¡verá qué bonita!"...>
(Y puestos a rizar el rizo, hacer que la imagen cambie al pasar el mouse por encima, tipo rollover, de "off/apagado" a "on/encendido")
[Aunque resulte pedante, me cito a mí mismo]
Solución:
<script>
function argi(zein) {
document.images[zein].src=("../img/"+zein+".jpg");
};
</script>
<script>
function ilun(zein) {
document.images[zein].src=("../img/"+zein+"off.jpg");
};
</script>
Llamadas a las funciones:
<tr ... onMouseOver="argi('mifoto')" onmouseout="ilun('mifoto')"...>
...
definición en cada imagen:
<img name="mifoto"...>
[En los tres sitios tiene que ser el mismo nombre]
-COMPARTIENDO, MEJORAMOS TODOS-