Imagen con enlace en HTML

02/Feb/2010 HTML , 23 Comentarios

Aunque lo normal en la web es que los enlaces sean textos, también podemos extender la capacidad de hacer enlaces con imagenes. De esta forma, cuando pulsemos sobre una imagen, esta actuará como enlace y nos llevará al destino demarcado por el enlace.

Para poder hacer esto en HTML, lo primero será poner una imagen. Para ello nos basamos en la etiqueta IMG:

  1. <img src="casarural.jpg" alt="Los Tejos" />

Acordaros, como buena práctica, el poner un texto alternativo a la imagen con el atributo alt.

Ahora tendremos que recubrir el código de la imagen con un código de enlace. Para los enlaces nos basamos en la etiqueta A o anchor. Y para indicar el enlace el atributo href. De esta manera el código quedaría de la siguiente forma:

  1. <a title="Los Tejos" href="http://www.lostejos.com"><img src="casarural.jpg" alt="Los Tejos" /></a>

Vídeos sobre HTML


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

23 comentarios en “Imagen con enlace en HTML”

Víctor Cuervo

Que hacer

Muy bueno el aporte de este articulo, me a sacado del apuro, seguir asi, saludos

Víctor Cuervo

Víctor Cuervo

Eso está muy bien. Nos gusta saber que somos útiles.

Saludos.

Víctor Cuervo

anonima

MUY BUENO, ME HA SALIDO A LA PRIMERA.
Y LO NECESITABA PARA UN TRABAJO.
MUCHAS GRACIAS.

Víctor Cuervo

Víctor Cuervo

Nos alegra mucho escuchar eso. 😀

Saludos.

Víctor Cuervo

Jorge

Buenos dias/noches como puedo enlazar mi web con la carpeta de la parte Movil??gracias anticipadamente

Víctor Cuervo

Víctor Cuervo

Jorge, los enlaces solo pueden hacerse contra elementos que estén públicos, nunca contra elementos internos.

Saludos.

Víctor Cuervo

Mariachis en Lima

Interesante código, he dado mucha vuelta en la web, en busca de un código html donde pueda tener el “alt” para que las imagenes me ayuden con el posicionamiento y no sabia que era tan facil, las implementare en este momento en mi web.

Gracias por el dato

Víctor Cuervo

Víctor Cuervo

Es algo sencillo y que ayuda mucho. Y sobre todo que funciona muy bien para el posicionamiento.

Saludos.

Víctor Cuervo

sheccid

ayuda! mi html contiene estilos bootstrap, pero al agregar un estilo a una imagen dentro de un tag <a> al conectarse con internet me agrega un display:None que yo no se lo he agregado, ayuda como hago para evitar se agregue este display:None

Víctor Cuervo

Víctor Cuervo

¿Dónde te agrega el display:none? ¿Puedes pegarnos el código aquí o en nuestro foro – http://wwww.dudasprogramacion.com? Para que podamos echarle un ojo.

Saludos.

Víctor Cuervo

Tapilam

Es exactamente lo que estaba buscando, solo me falta agregarle un target blank y listo. Muchas Gracias!

Víctor Cuervo

Víctor Cuervo

Genial! Nos alegramos que te haya servido.
Muy bien lo del target blank para abrir en otra ventana. 🙂

Víctor Cuervo

Alejandro

Buenas, lo que me interesa saber es como puedo hacer este mismo formulario.

Se que se hace con php, al inspeccionarlo veo que hay un form action a una página .php, con metodo post.

Mi pregunta es, esta página a la cual es redirigido este formulario que hace, como funciona, esa es mi duda.

Un formulario similar a este me enseñaron a hacer pero en java y en ese caso utilizábamos un servlet que enviaba los datos a una BDD mysql.

En este caso los datos también los envían a una BDD, por ejemplo esto que estoy enviando o lo envían a un correo electrónico.

Y si estos datos son enviados a una BDD, que BDD? ¿utilizan MySQL?.

A este form action me refiero:

Déjanos tu comentario, no te preocupes que tu email no será publicadoComentario Nombre *
Email *
Sitio Web


Código CAPTCHA *

Atento a sus comentarios.

Atentamente: un estudiante de programación.

Víctor Cuervo

Pajus

Perdonad, tengo el html asi, y no se por que no me va el href, alguna sugerencia?

Víctor Cuervo

hugo

no se, era un template sin embargo te envio algo del codigo. Gracias por tu ayuda

*******

$(window).load(function(){
$(‘.slider’)._TMS({
show:0,
pauseOnHover:false,
prevBu:’.prev’,
nextBu:’.next’,
playBu:false,
duration:800,
preset:’fade’,
pagination:true,//’.pagination’,true,”
pagNums:false,
slideshow:8000,
numStatus:false,
banners:false,
waitBannerAnimation:false,
progressBar:false
})
});
$(window).load (
function(){$(‘.carousel1’).carouFredSel({auto: false,prev: ‘.prev’,next: ‘.next’, width: 960, items: {
visible : {min: 1,
max: 4
},
height: ‘auto’,
width: 240,

}, responsive: false,

scroll: 1,

mousewheel: false,

swipe: {onMouse: false, onTouch: false}});

Víctor Cuervo

Víctor Cuervo

Si es el TMS slider supongo que trabajará con una estructura del tipo:

<div class="slider">
    <ul class="items">
        <li><img src="images/slide-1.png" /></li>
        <li><img src="images/slide-2.png" /></li>
        <li><img src="images/slide-3.png" /></li>
        <li><img src="images/slide-4.png" /></li>
        <li><img src="images/slide-5.png" /></li>
    </ul>
</div>

Lo que tienes que hacer es incluir los enlaces en esa lista de elementos:

<div class="slider">
    <ul class="items">
        <li><a href="enlace.html"><img src="images/slide-1.png" /></a></li>
        <li><a href="enlace.html"><img src="images/slide-2.png" /></a></li>
        <li><a href="enlace.html"><img src="images/slide-3.png" /></a></li>
        <li><a href="enlace.html"><img src="images/slide-4.png" /></a></li>
        <li><a href="enlace.html"><img src="images/slide-5.png" /></a></li>
    </ul>
</div>

Espero que te ayude.

Víctor Cuervo

hugo

Gracias por tu aporte pero mi duda es que tengo la imagen en un slider y quiero que al hacer click en cada una de las imagenes vaya a otra pagina dentro de mi sitio web, me podrias indicar como se hace?

Gracias

Víctor Cuervo

Víctor Cuervo

Hugo, depende del slider que estés utilizando. ¿Cuál utilizas? Saludos.

Víctor Cuervo

posicionamiento web seo madrid

Sin duda una propuesta increible e innovadora, sera muy interesante poder utilizarlo para el diseño web e introducir en el código esta novedad. Gracias

Víctor Cuervo

lineadecodigo

@carlos andres restrepo,

Intentamos que sean muy sencillos. Pero estamos abiertos a propuestas. ¿Sobre que te gustaría que escribiésemos?

Víctor Cuervo

lineadecodigo

@x,

Cierto. Que despiste.
Solucionado.

Víctor Cuervo

carlos andres restrepo

los articulos son algo basico para lo que se vive en internet actualmente

Víctor Cuervo

x

nice, pero te falto cerrar el tag

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*