Generar enlace con una imagen en html
Bienvenidos a VerTutoriales.com, en esta ocasión vamos a resolver la duda de la administradora del blog de cocina Cocinar con Recetas en la cual quería insertar una imagen que enlazara con otro blog en el que quería participar.
Así que me puse manos a la obra y creé un Generador de enlaces con imagen para que no tuvieran que complicarse con el código que explicaré más adelante. El generador es muy sencillo, solo tiene 2 cajas de texto en las que copiar la url de destino y la imagen que quieren utilizar, pulsas el botón y directamente te devuelve el resultado y el código a copiar para tu página. Espero que les sea de utilidad.
El código sería sencillo de implementar, como ya vimos en otros tutoriales, para insertar un hipervínculo el código sería:
<a href=»http://www.vertutoriales.com»>Click para ver tutoriales</a>
En el código anterior mostraría el mensaje «Click para ver tutoriales» y al hacer click sobre el texto nos enviará a http://www.vertutoriales.com.
Ahora vamos a insertar una imagen, veamos:
<img src=»http://www.vertutoriales.com/logo-vertutoriales.jpg»>
Con el anterior código html insertaremos una imagen en nuestro documento, pero ¿qué hacemos para enlazar la imagen? pues sencillo:
<a href=»http://www.vertutoriales.com»><img src=»http://www.vertutoriales.com/logo-vertutoriales.jpg»></a>
De esta forma podemos insertar una imagen y enlazarla a donde queramos.
Podeis ver el resultado en la aplicación que hemos realizado:
Generador de enlaces con imagen
Espero que tanto la aplicación como la explicación os sea de utilidad!
Un saludo!
