Poner una imagen que enlace a otra de mayor tamaño

A veces una imagen tiene suficiente detalle como para que reducirla, aunque sea a 700 puntos de ancho, nos resulte algo pequeña. Pero incluir una imagen de tamaño mayor sería contraproducente debido a que la visualización de la página no permitiría poder contemplar la imagen completa.
Una alternativa consiste en poner en el foro una imagen no muy grande y permitir que si el usuario pincha en la misma se le abra una ventana nueva con la foto a tamaño mayor.

En El Almacén de Fotografía Libre y en páginas similares normalmente tenemos más de una versión de cada imagen presentadas a diferentes tamaños según para qué tipo de visualización.
Lo único que necesitaremos saber son las url o direcciones de cada una de las imágenes y el resto lo haremos con los iconos del editor.

En el caso de www.fotolibre.org si se ha subido una imagen de tamaño mayor a 750 pixeles de ancho, nos habrá generado una intermedia de dichas dimensiones a la que llama con el mismo nombre de archivo, pero comenzando por "normal_".
Esta imagen "normal" es la que verán los visitantes de la galería por defecto, y si pinchan con el ratón en ella, se les abrirá una ventana nueva con la imagen a tamaño original.

Para saber la dirección o url de la imagen, todos los navegadores tienen opciones en el botón derecho del ratón del tipo "Copiar la ruta de la imagen", aunque en Internet Explorer es un poco más complicado porque requiere usar la opción de Propiedades y si la url es muy larga a veces se corta.

Una vez con las url'es en el portapapeles venimos al editor y las "pegamos" .

En nuestro ejemplo las direcciones de las imágenes son:
http://www.fotolibre.org/albums/userpics/10002/navacerrada-arboles-c01-f.jpg la grande y
http://www.fotolibre.org/albums/userpics/10002/normal_navacerrada-arboles-c01-f.jpg la intermedia.
(recuerda que en las url del Almacén siempre es necesario poner las www)

Estos son los pasos a seguir:

Seleccionamos la url "normal" y pinchamos el botón de Insertar Imagen (

), con lo que obtenemos el siguiente código:

Código:

[img]http://www.fotolibre.org/albums/userpics/10002/normal_navacerrada-arboles-c01-f.jpg[/img]

Ahora seleccionamos la línea completa y pinchamos en el botón de Insertar hipervínculo (

). Nos deja este texto:

Código:

[url][img]http://www.fotolibre.org/albums/userpics/10002/normal_navacerrada-arboles-c01-f.jpg[/img][/url]

A continuación de la primera vez que aparece la palabra "url", añadimos un signo de = (igual) y la url de la imagen a tamaño completo. Esto es:

Código:

[url=http://www.fotolibre.org/albums/userpics/10002/navacerrada-arboles-c01-f.jpg]
[img]http://www.fotolibre.org/albums/userpics/10002/normal_navacerrada-arboles-c01-f.jpg[/img][/url]

Y para terminar de dejarlo vistoso, volvemos a seleccionar todo y pinchamos el botón de Centrado (

Código:

[center][url=http://www.fotolibre.org/albums/userpics/10002/navacerrada-arboles-c01-f.jpg]
[img]http://www.fotolibre.org/albums/userpics/10002/normal_navacerrada-arboles-c01-f.jpg[/img][/url][/center]

Una vez que pinchemos en Previsualizar o veamos el mensaje una vez publicado, el resultado será:

En otros sistemas, en que disponemos de diferentes tamaños de imágenes, lo único que necesitamos es conseguir la url de cada una de ellas y el resto es exactamente idéntico.

Miniaturas

Otra posibilidad es la de presentar miniaturas, aunque sólo recomendable para casos muy concretos. El proceso es exactamente el mismo que el anterior pero cambiando la imagen base (la "normal") por la miniatura que nos ha generado El Almacén o sistema equivalente.

En nuestro caso las miniaturas tienen el nombre de la imagen original pero comenzando por "thumb_", es decir:
http://www.fotolibre.org/albums/userpics/10002/thumb_navacerrada-arboles-c01-f.jpg

Si hacemos la correspondiente sustitución en el código anterior tenemos:

Código:

[center][url=http://www.fotolibre.org/albums/userpics/10002/navacerrada-arboles-c01-f.jpg]
[img]http://www.fotolibre.org/albums/userpics/10002/thumb_navacerrada-arboles-c01-f.jpg[/img][/url][/center]

que aparece cómo

Nótese que lo que se ha sustituído es la imagen, no el hipervínculo.

[Comunidad FotoLibre]