Cómo Poner un Enlace a una Imagen usando HTML
¿Te has preguntado como agregar un enlace en una imagen? Es muy sencillo y lo conseguimos usando código HTML. Esto puede resultar útil, cuando quieres agregar un enlace a una entrada del blog. Auque el editor de entradas de Blogger agrega un enlace a las imagenes, enlazando la imagen con su tamaño original, reconocer el código te va a facilitar mucho las cosas, para poder colocar en su lugar otra dirección web o URL de una pagina a donde quisieras que te envíe al hacer click sobre la imagen.
Lo que necesitas
✔La URL de la imagen a la que te interesa añadir un enlace, puede ser en formato PNG, JPEG ó GIF, para ello tienes que subirla a Blogger por ejemplo, desde una entrada del blog u otro blog.
Ejemplo de la URL de la imagen obtenida desde el editor de Blogger:
http://3.bp.blogspot.com/_yCA1gGtzYzo/S2UQh0qgufI/AAAAAAAAB_
A/LqYIpZ0MaUw/s1600-h/conservar+gatgets.png
✔La dirección de la página web (URL) a la que quiero que me envíe cuando se haga click sobre la imagen.
Ejemplos
1. http://compartidisimo.blogspot.com/
2. http://compartidisimo.blogspot.com/2010/02/primer-sorteo-de-plantilla.html
*La URL de una entrada de tu blog lo consigues copiando la dirección que aparece en la barra de direcciones de tu navegador al ingresar al post que te interesa enlazar.
✔Y por supuesto, el código HTML.
Cómo hacerlo
Paso 1: Copia el código siguiente y pégalo en un sitio donde puedas trabajar con el, por ejemplo en una nota de tu computadora.
<a href="URL_de_la_Página"><img alt="texto alternativo" src="URL_de_ la_imagen" title="texto que aparece al poner el puntero sobre la imagen"/></a>Paso 2: Sustituye lo que está resaltado de azul. Ojo: ten mucho cuidado de no borrar las comillas que están al principio y al final de los valores de cada atributo.
Notas:
El texto alternativo, es el texto que aparece en sustitución de la imagen cuando esta no puede ser mostrada por alguna razón por el navegador. Éste se coloca como valor, dentro de un atributo llamado alt, como puedes apreciar en el código.
Usamos un atributo llamado title, que sirve para que el navegador muestre un tooltip (texto que se muestra al poner el puntero encima del enlace). Si no quieres que se muestre ningún texto al poner el puntero sobre la imagen, elimina la parte que dice: title="texto que aparece al poner el puntero" y listo.
Paso 3: Ya que sustituiste todos los valores y textos, puedes agregar el código en una entrada o donde vayas a usarlo.
Notas interesantes
- Blogger cuenta con una opción que te permite añadir una imagen y también puedes agregar a esta un enlace si así lo quieres, para ello solo tienes que ir a: Diseño ►Añadir un gadget, y seleccionar la opción de "Imagen" y subirla. De ese modo no necesitaras escribir el código.
- Para evitar que haya problemas cuando uses un gif animado, cuando agregas una imagen usando el gadget Imagen, no marques la casilla de Reducir hasta ajustar.
Etiquetas:HTML,trucos,Tutoriales