Cómo enlazar una imagen a un enlace en HTML

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.

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”.

Si te sirvió, ¡compártelo!

También te interesaría...

Suscríbete a nuestra lista de correo

15 Comentarios

  1. Ana Laura dice:

    Desde hoy adicta a tu blog.
    Un tutorial simplemente fantastico.

    Saludos y gracias

  2. Javi dice:

    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.

    • admin dice:

      ¡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:

      <a href="tel:+5555555555"><img src="URL DE LA IMAGEN"></a>
  3. 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.

  4. Lucia dice:

    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?

  5. Jesús Silva dice:

    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…

    • admin dice:

      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 🙂

  6. Magdiel Luna dice:

    Hola!! y si quiero hacer que el enlace lo abra en una nueva pestaña??
    De antemano gracias, apenas estoy aprendiendo html

  7. Josue dice:

    Veras yo hago todo y perfecto pero me agrega las imagenes con unos pixeles por debajo, no se que pase 🙁

    • admin dice:

      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!

  8. Gabriel dice:

    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?

  9. Victoria dice:

    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

    • admin dice:

      Hola Victoria! Disculpa, no comprendo el problema del todo. Solo deberías tener esta parte del código:

      <a href="URL DESTINO"><img src="URL DE LA IMAGEN"></a>


      Te refieres a que la imagen tiene la apariencia de ser un hipervínculo?

Agregue un comentario

Su dirección de correo no se hará público.


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.