Objetivo: aprender el código HTML necesario para crear un hiperenlace a partir de una imagen.
Eh Hipertexto saltarín vimos el secreto de la magia de la web que permitía tejer una red de contenidos enlazados. El elemento <a> era el responsable de esa magia.
Hagamos un breve resumen: entre las etiquetas de apertura y cierre, <a> ... </a> facilitábamos el texto que activaría el salto cuando el usuario hiciera clic sobre él (que suele visualizarse subrayado). El atributo href contenía la dirección a la que se saltaría. Por ejemplo, una línea como la siguiente:
Este es el índice de artículos relacionados con HTML.
se generaría del siguiente modo:
Este es el <a href="http://elclubdelautodidacta.es/wp/indice-html/">índice</a> de artículos relacionados con HTML..
Quiero plantear hoy la siguiente cuestión: ¿y si, en vez de una palabra o frase, queremos que el activador del salto sea una imagen?
Por ejemplo, fíjate en la oveja experta en HTML que aparece a continuación, pillada en el momento en el que se disponía a darse un homenaje en forma de patatas bravas. Si haces clic sobre ella se te abrirá una página con el índice de artículos relacionados con HTML.
¿Cómo se hace eso en HTML?
La respuesta ya la sabes, aunque no lo creas:
1) Sabes cómo referenciar imágenes.
2) Sabes que lo que esté entre las etiquetas <a> ... </a> será el activador del hiperenlace.
Por lo tanto, si quieres que el activador sea una imagen, coloca el código que la referencia entre las etiquetas <a> ... </a>.
Este es el código que mostraría la imagen:
<img src="http://elclubdelautodidacta.es/wp/wp-content/uploads/2012/06/ECDA-HTML-2.jpg" />
Para que actúe de hiperenlace, la situamos entre <a> ... </a>:
<a><img src="http://elclubdelautodidacta.es/wp/wp-content/uploads/2012/06/ECDA-HTML-2.jpg" /></a>
Finalmente, introducimos la dirección de destino (el índice con todos los artículos de HTML) como valor del atributo href dentro de la etiqueta de apertura <a>:
<a href="http://elclubdelautodidacta.es/wp/indice-html/">
<img src="http://elclubdelautodidacta.es/wp/wp-content/uploads/2012/06/ECDA-HTML-2.jpg" />
</a>
Así de sencillo…
Javier Montero Gabarró
El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)
El Club del Autodidacta