Imagen con enlace en HTML

02/Feb/2010 HTML , 57 Comentarios

Aunque lo normal en la web es que los enlaces sean textos, también podemos extender la capacidad de hacer enlaces con imágenes. 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 el elemento IMG:

<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 el elemento A o anchor. Y para indicar el enlace el atributo href. De esta manera el código quedaría de la siguiente forma:

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

 

Vídeos sobre HTML


57 comentarios en “Imagen con enlace en HTML”

Víctor Cuervo

carlos

Mi consulta creo que no tiene que ver con el tema tratado aqui, pero no encuentro donde  solucionar mi tema, la cuestion es que no logro colgar imagenes en mi blog por que las que tengo guardades en Mi galeria solo son JPG y no tienen direccion URL o http como me solicita en algunos sitios, Por ejemplo unas fotos que recibi x correo no tienen direccion y no puedo subirlas a mi blog, como tengo que hacer para crearles una direccion?

Víctor Cuervo

Jm

TENDRIAS QUE ALOJAR LAS IMAGENES EN ALGUN SERVIDOR EXTERNO, EJEMPLO WORDPRESS O PICASA

 

Víctor Cuervo

Benito Camelo

Amigo,no se si sea yo pero el orden en el que pusiste el codigo para insertar el link,dentro de la imagen,esta mal,ya que yo lo puse en el orden que tu lo tienes,pero no funcionaba,pero despues cerre primero el codigo<a> y despues el codigo de imagen,y si funciono

Víctor Cuervo

Pagina Web

Impresionante muchas gracias por compartir

Víctor Cuervo

Jorge Morales

Hola amigo, quisiera preguntar algo aunque parezca muy normal, pero soy aprendiz y se me ha complicado bastante. Lo que requiero es poner una flecha hacia abajo o a la derecha y que al darle clic abra otra parte de mi pagina web.

No he podido hacerlo y ya he intentado muchas opciones.

Me podrían ayudar por favor?

Gracias

Víctor Cuervo

Eduardo

Buen día, gracias por su tiempo en explicar, deseo enviar una imagen por whatsapp y que cuando alguien clickee en ella lo lleve a una pagina de internet, me podria colaborar, desde cero? gracias

Víctor Cuervo

alejandro

holasa, cómo va? mira tengo una tema. no sé cómo poner una imagen como logo en html. me podrías explicar por favor? muchas gracias :)

Víctor Cuervo

diego martinez

amigo que pena una pregunta lo que pasa es que puse un imagen de instagram y de facebook a mi header para que los lleve a mis redes sociales y estos están localizados en la parte superior derecha pero también se crearon unas lineas diminutas como de un pixel por 3 pixeles y esas también envían al enlace de cada res social, como hago para que la url de esas redes sociales no se salga de la imagen ? muchas Gracias

Víctor Cuervo

Víctor Cuervo

Buenas Diego,

¿Tienes el código fuente que has puesto para crear esos enlaces? O algún sitio dónde podamos verlo?

Saludos.

Víctor Cuervo

Raquel

Buenas, tengo el siguiente problema, quiero agregar a blogger un logo y convertirla en botón para que me lleve a mi web
estoy atascada

Gracias y saludos,

Víctor Cuervo

yurani torres

Hola lo que pasa es que necesito que me ayuden para un examen el lunes , lo que pasa es que estamos viendo marcos , ya tengo 3 marcos , en el primero estan unos enlaces que me llevan al segundo marco donde aparecen unas imagenes , el problema es que no se que hacer ya en el segundo marco para que al darle click a la imagen me aparesca en el marco tres
Por favor cualquier ayuda me serviria mucho gracias

Víctor Cuervo

Kevin Ortiz

Muchas Gracias Me Sirvió Mucho.

Víctor Cuervo

Jean

Gracias!

Víctor Cuervo

Ricardo

Buenas, mi consulta es la siguiente: quiero colocar una imagen en mi pagina web que al hacer clik automaticamente se descargue en el escritorio (de la pc o movil) y me cree un acceso directo (es decir tenga insertado el link a mi sitio web)

Gracias

Víctor Cuervo

Víctor Cuervo

Buenas,

Para descargar la imagen vale con que utilices el atributo download dentro del enlace.

<a href="imagen.png" donwload>

Lo del enlace ya algo más complicado. Voy a ver si encuentro algo de información al respecto.

Saludos.

Víctor Cuervo

victor

muy buenas tardes, tengo dificultades al introducir en la linea de codigos html en una tabla el button, color de letra, el tamaño, la fuente todo eso, pueden hecharme una manito??

Víctor Cuervo

Víctor Cuervo

Échale un vistazo al artículo http://lineadecodigo.com/css/formato-de-texto-por-defecto-con-css/ a ver si te orienta un poco.

Saludos.

Víctor Cuervo

Andrés Pardo

Buenas tardes. Realizo un Cartel DIN A 4 (Publisher) y en él hay fotografías. ¿Que tengo que hacer para que cuando publique el Cartel en Facebook, se puedan abrir y visualizar fotografías de forma individual?. Un saludo

Víctor Cuervo

José María

Yo lo que quiero es que mediante un formulario html le meta una dirección url de una imagen y luego me la muestre en mi base de datos php-mysqli.

Gracias

Víctor Cuervo

Pedro

Hola.
Mi problema es que en mi web quiero insertar una imagen que está en FLICKR, o sea en una URL externa.
Si lo hago como indica aquí, no me funciona, me sale un cuadrito de imagen pequeño (1 pixel cuadrado o algo así).
Solo funciona cuando la imagen está en tu CPANEL de la web, es decir cuando la tienes en tu repositorio.

He probado con URL externa de la imagen y funciona muy bien. Pero en este caso, cuando pincha en la imagen siempre te dirige a la web donde está alojada esa imagen. Y yo quiero que cuando pinchen en la imagen dirija a una de mis páginas.

¿Se os ocurre alguna solución?

Víctor Cuervo

Pedro

Perdón. Se me quedó cortado el mensaje anterior. En el segundo párrafo quise decir:

He probado con html con URL de la imagen para incrustar la imagen de FLICKR y funciona muy bien. Pero en este caso, cuando pinchamos en la imagen siempre te dirige a la web donde está alojada esa imagen (en mi caso a Flickr). Y yo quiero que cuando pinchen en la imagen dirija a la página que yo le indique y no a la de la imagen.

¿Se os ocurre alguna solución?

Víctor Cuervo

Pedro

Lo siento, al publicar el mensaje no me publica código h.t.m.l. Ha omitido una frase importante: En el segundo párrafo he usado la etiqueta «embed». (es un dato muy importante)

Víctor Cuervo

juan

Me ocurre lo mismo. Por lo que veo el problema es que los sitios como Flickr brindan un enlace a las imágene que no se puede modificar. Para enlazar las imágenes a otros sitios en vez de a la galería de imágenes que tienes en Flickr, deberías disponer de la URl de dichas imágenes, y para ello sólo te queda subirlas a tu biblioteca de medios. De lo contrario, desconozco cómo se podría redireccionar esas imágenes que están en Flickr hacia otras direcciones. Quizás se pueda hacer mediante código agregando las etiquetas adecuadas, pero no sé cómo se hace.
Por otra parte lo que yo quiero hacer es quizás más sencillo, sólo que no sé cómo hacerlo: he utilizado el widget de texto / HTML de mi blog de WordPress, para colocar una imágen en el menú lateral, que está enlazada a un sitio desde el que se pueden descargar publicaciones en PDF. El problema es que al hacer clic en la imágen, me abre ese otro sitio y me saca del blog. Lo que quiero poder hacer entonces es simplemente que al hacer cic, se abra ese otro sitio pero en una ventana nueva, sin que me saque del blog.

Víctor Cuervo

Víctor Cuervo

Buenas, Cuando dices que abre otro sitio, ¿a dónde apunta el enlace?
Tienes algún sitio para poder revisarlo.

Saludos.

Víctor Cuervo

Víctor Cuervo

Buenas Pedro,

Si te vas a la parte de compartir de Flickr hay una opción que es Compartir, y dentro de ella uno que se llama Insertar. Si buscas dentro hay una URL que empieza por https://farm2.staticflickr.com/… Por ejemplo https://farm2.staticflickr.com/1878/44581751321_00d9d114e4_k.jpg

Si utilizar esa URL como se indica en este artículo te funcionaría.

<a title="Paisaje" href="https://www.flickr.com/photos/victorcuervo/" rel="nofollow">
  <img src="https://farm2.staticflickr.com/1878/44581751321_00d9d114e4_k.jpg" alt="Paisaje" />
</a>

Espero que te ayude.

Saludos.

Víctor Cuervo

Eduardo Antonio Federici Pujol

tengo una consulta……
necesito poner una imagen «X» en mi web y que se pueda seleccionar cualquiera de las posibilidades como botones para que se comparta….. ejemplos:

imagen x hacer clic en un boton verde de watsapp y se comparta en watsapp la imagen
otro ejemplo
la misma imagen pero si hago clic en boton azul que se comparta en facebook la imagen
otro ejemplo
la misma iamgen con boton rojo y que la imagen se envie por mail

hay alguna forma de hacer esto en html desde ya gracias

Víctor Cuervo

Anonimo

Eso se hace con css creo, es para compartir por google, facebook, twitter, etc, el rectángulo lo puedes sacar de cualquier pagina con la G de google, de el rectangulo te encargas tu, luego puedes ingresar a este enlace que encontré: https://www.youtube.com/watch?v=p1WyhnxbDW4 ahi te enseña como hacer lo que tu quieres (sistema de compartir) espero te sirva :)

Víctor Cuervo

daniela

me ayudo mucho gracias.

Víctor Cuervo

Víctor Cuervo

Nos alegra mucho que te haya servido. :-D

Víctor Cuervo

Jack B.

Saludos amigos, a ver si surge una idea ( se que via PHP Y MYSQL se puede lo que voy a preguntar, pero puede surgir una idea mas simple ) Digamos que para una escuela que hacen cortos cursos de verano se quiere hacer un script donde en la web se coloque un código cualquiera, digamos ZZXXCCVV (como ejemplo) y este muestre una imagen del certificado de asistencia …. parece sencillo pero no ha surgido una idea simple para implementar esto … saludos y les dejo ese acertijo

gracias .

Víctor Cuervo

Jesús Silva

Saludos… quisiera saber si tienes el código para vincular una imagen web y redireccionarla a una pagina web… y si es efectiva para facebook…. gracias

Víctor Cuervo

Fátima

¡ Hola!
A mi me gustaría saber cómo se puede crar un enlace de una imagen con html y realcionarla conuna frase ; por ejemplo: escribo en la página web «consulte esta imagen «y al dar clic en esta frase me sale la imagen.

Víctor Cuervo

Jhon España

Gracias amigo, nunca recuerdo el codigo para meter enlaces en imagenes xd, te guardo en marcadores para cuando me vuelva a hacer falta.

Víctor Cuervo

Sara

:)

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. :-D

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

*