Como poner un enlace en una imagen en HTML

Esta entrada sobre HTML es básica a la hora de poder diseñar cualquier cosa en HTML. EL como poner un enlace en una imagen que a la hora de hacer click en ella nos lleve a la imagen en tamaño natural o incluso a una página web destino, que suele ser lo mas normal, es muy útil para poder tener un sitio web decente.

En primer lugar, tendremos que ver cual es el código que hay que poner para poder insertar una imagen.

Es muy simple, solo hay que introducir esta linea de código en nuestra Edición de HTML:

<img src="URLDESTINO/imagen.jpg">

En donde pone URLDESTINO/imagen.jpg hay que poner la dirección de la imagen que queremos poner que tiene que estar subida a la red, no vale tenerla en el ordenador. Para poder subirla, si no tienes un espacio web lo puedes subir a servidores gratuitos como imageshack.

El tamaño de la imagen saldrá el que tenga por defecto, si queréis modificar el tamaño a un tamaño dado tendríais que hacerlo con estos dos parámetros, heigth(alto) y width (ancho):

<img src="URLDESTINO/imagen.jpg" width="ancho" height="alto">

Y en segundo lugar solo tendremos que poner nuestra linea de código de la imagen entre dos etiquetas <a></a> con sus correspondientes parámetros como indico a continuación:

<a href="ENLACEDESTINO/pagina.html"><img src="URLDESTINO/imagen.jpg" width="400" height="300"></a>

En donde poner ENLACEDESTINO/pagina.html pondremos la dirección de la dirección web a donde queremos que nos enlace la imagen.

Y ya está, es mucho mas sencillo de lo que parece.

Seguidamente os dejo un ejemplo para que veáis como es:

Código para introducir la imagen:

<img src="http://img299.imageshack.us/img299/8052/banner250unamoscavolandnb8.gif/imagen.jpg">

La URL de la imagen es:

http://img299.imageshack.us/img299/8052/banner250unamoscavolandnb8.gif

Por lo tanto el resultado es:

Pero aun no tenemos el enlace asignado a nuestra imagen, que se hace de esta manera:

<a href="http://unamoscavolando.blogspot.com"><img src="http://img299.imageshack.us/img299/8052/banner250unamoscavolandnb8.gif"></a>

En donde la dirección a la que queremos enlazar es:

http://unamoscavolando.blogspot.com

Y como resultado nos queda:

(enlace en la misma página)

Como último truco, si quieres que al hacer click en la imagen no se te cargue la página destino o imagen destino en la web desde donde haces click sino que se te cargue en una página nueva, solo te basta con poner el parámetro target="_blank" dentro de la etiqueta del enlace <a> como indico a continuación:

<a href="http://unamoscavolando.blogspot.com" target="_blank"><img src="http://img299.imageshack.us/img299/8052/banner250unamoscavolandnb8.gif"></a>

Quedando finalmente el enlace de esta manera:

(enlace a página nueva)