Imagenes (parte 2) e hípervinculos

Otro de los atributos que pueden asociarse a las imagenes en nuestras entradas es la de servir como hípervinculos, no sólo al servidor donde se encuentra hospedada la imagen, sino a cualquier sitio o archivo, relacionado o no a la propia imagen

Recordemos entonces la etiqueta html para crear un hípervinculo:

<a href=""></a>

entre los parentesis colocaremos el hípervinculo a la página o archivo que deseeamos destacar en nuestra entrada

<a href="dirección de la página o archivo">Texto con el que deseamos destacar el hípervinculo</a>

Para que el hípervinculo aparezca asociado a una imagén, sólo debemos de colocar la etiqueta de imagen entre la etiqueta de hípervinculo en vez de colocar texto,por lo que nuestra etiqueta html será la siguiente:

<a href=""><img src=""></a>

La imagen en este caso se dirige a un sitio o página cualquiera en Internet:

<a href="http://www.warhol.org/"><img src="http://i294.photobucket.com/albums/mm84/intellego/especiales/warhol_csoup.jpg"></a>



Aún cuando ciertos servicios de blogging nos permiten elegir la forma en que los vinculos aparecen en nuetras entradas, en caso que nuestra plantilla o servicio enmarque nuestra imagen con un borde de color azul (o el color especificado para cualquier hípervinculo).

Podemos eliminar dicho borde, o cambiar su tamaño alterando la etiqueta de la imagen de la siguiente forma:

<a href=""><img src="" border=0></a>

<a href=""><img src="" border=6></a>

En el caso de nuestro blog, los bordes no aparecen aún cuando se indique,debido a la plantilla utilizada, pero se puede ver el resultado de las etiquetas en esta página.

Una imagen como hípervinculo, tambíén puede presentar una etiqueta que permita abrir la dirección o el archivo destino, en una nueva ventana del navegador (o en otra pestaña, dependiendo de la versión de nuestro navegador).

Simplemente debemos agregar a nuestra etiqueta de hípervinculo, el atributo target="_blank", despues de la dirección o archivo destino:

<a href="" target="_blank"><img src="" border=0></a>

<a href="http://www.warhol.org/" target="_blank"><img src="http://i294.photobucket.com/albums/mm84/intellego/especiales/warhol_csoup.jpg"></a>



Por último, podemos agregar una leyenda descriptiva, la cual sólo aparece al colocar el cursor sobre la imagen, en la etiqueta de imagen, agregamos el atributo alt="", y el texto descriptivo puede ser el nombre que otorgemos a la imagen, el título del sitio o el archivo destino del hípervinculo, etc.

<a href="" target="_blank"><img src="" border=0 alt="Warhol Museum"></a>

<a href="http://www.warhol.org/" target="_blank"><img src="http://i294.photobucket.com/albums/mm84/intellego/especiales/warhol_csoup.jpg" alt="Warhol Museum"></a>



por Elliot Ibáñez