El código HTML cada vez se hace más conocido por todos debido a que es usado en blogs, webs y hasta foros. En este breve y rápido tutorial te mostraremos cómo enlazar una imagen a un enlace en HTML.
Obtener la URL de la imagen
Si estamos trabajando en una web o blog, debemos subir la imagen a nuestro servidor. De caso contrario, puedes utilizar servicios como Imgur, Pasteboard, etc. Ahora, deberemos tener claro la URL de nuestra imagen, que es el lugar donde está almacenada.
Nota: Si estás trabajando offline, puede tener la imagen en la carpeta donde está tu archivo .HTML. La url en este caso solo sería “NOMBREDELAIMAGEN.jpg”.
Código HTML para enlace e imagen
El código HTML para enlaces es el siguiente:
<a href="URL DESTINO">Enlace</a>
En este caso, se mostrará la palabra “Enlace” y al dar click nos llevará a la “URL DESTINO”. Lo que nosotros queremos lograr es que se muestre la imagen y esta nos lleve a una dirección.
Esto lo lograremos sabiendo el código HTML para mostrar una imagen:
<img src="URL DE LA IMAGEN">
Código para enlazar una imagen a un enlace en HTML
Ahora debemos juntar estos códigos para lograr lo que deseamos. Esto sería así:
<a href="URL DESTINO"><img src="URL DE LA IMAGEN"></a>
De esta manera, se mostrará una imagen que al dar click nos llevará a la “URL DESTINO”.
Desde hoy adicta a tu blog.
Un tutorial simplemente fantastico.
Saludos y gracias
Hola, lo que yo quiero es poner una imagen de un teléfono y que al pinchar te lleve directamente a llamada telefónica. Se podía hacer esto?
Saludos y gracias.
¡Hola Javi!
Para poner una imagen con enlace a una llamada telefónica, lo harías de la misma manera pero la url de destino sería “tel:+5555555555”.
Es decir, todo el enlace sería de la siguiente manera:
Gracias, siempre se me olvida despues de todos los años que llevo dedicandome a esto, te guardo en marcadores para volver cada vez que me haga falta.
Hola, quisiera saber si es posible enlazar un gift con la dirección de una cuenta , ya sea facebook o twitter. Lo que quiero es que el material que publique en el facebook se enlace con el twitter a penas den clic al gift. ¿Se puede hacer algo parecido? ¿es posible?
Saludos… he intentado insertar este codigo en facebook… y me arroja solamente la imagen y al abrirla sale el sitio de alojamiento de la imagen…
Hola Jesús!
Recuerda que la URL de la imagen debe ser directa, por ejemplo: “http://alojamientodeimagen.com/fwej9.jpg”. Debe terminar en alguna extensión de imagen: .png, .jpg, etc.
Por otro lado, si estás publicando en Facebook, lamento decirte que Facebook no admite código HTML en sus publicaciones.
Saludos 🙂
Hola!! y si quiero hacer que el enlace lo abra en una nueva pestaña??
De antemano gracias, apenas estoy aprendiendo html
Hola Magdiel! Para abrir un enlace en una nueva pestaña debes usar el atributo target con el valor “_blank”. Quedaría algo así:
Saludos!
Veras yo hago todo y perfecto pero me agrega las imagenes con unos pixeles por debajo, no se que pase 🙁
Hola Josue! Te cuento, las imágenes son elementos inline, lo que significa que se muestran en línea con los demás elementos como texto. Para quitar ese espacio debajo, tienes dos alternativas con CSS:
– Cambiar la propiedad de la imagen a
display:block;– Agregar la propiedad
vertical-align: middle;Saludos!
Hola! hice lo que indica tu blog, mi unica molestia es que solo permite “clickear” en los pixeles superiores mas no en toda la imagen, existe alguna solucion?
Hola Gabriel! Muy raro, puedes intentar cambiar la propiedad de CSS de la imagen a:
display:block;.Hola qué tal? tengo una duda, puse la imagen como dice acá, el hipervinculo esta anclado a la imagen todo como quería, el problema es que sigo teniendo el hipervinculo visible en el body y yo no quiero que se vea, solo quiero que aparezca en la imagen. Como se hace para que no sea visible? Muchas gracias
Hola Victoria! Disculpa, no comprendo el problema del todo. Solo deberías tener esta parte del código:
Te refieres a que la imagen tiene la apariencia de ser un hipervínculo?