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>
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?
Jm
TENDRIAS QUE ALOJAR LAS IMAGENES EN ALGUN SERVIDOR EXTERNO, EJEMPLO WORDPRESS O PICASA
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
Pagina Web
Impresionante muchas gracias por compartir
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
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
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 :)
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
Buenas Diego,
¿Tienes el código fuente que has puesto para crear esos enlaces? O algún sitio dónde podamos verlo?
Saludos.
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,
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
Kevin Ortiz
Muchas Gracias Me Sirvió Mucho.
Jean
Gracias!
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
Buenas,
Para descargar la imagen vale con que utilices el atributo download dentro del enlace.
Lo del enlace ya algo más complicado. Voy a ver si encuentro algo de información al respecto.
Saludos.
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
É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.
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
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
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?
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?
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)
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
Buenas, Cuando dices que abre otro sitio, ¿a dónde apunta el enlace?
Tienes algún sitio para poder revisarlo.
Saludos.
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.
Espero que te ayude.
Saludos.
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
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 :)
daniela
me ayudo mucho gracias.
Víctor Cuervo
Nos alegra mucho que te haya servido. :-D
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 .
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
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.
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.
Sara
:)
Que hacer
Muy bueno el aporte de este articulo, me a sacado del apuro, seguir asi, saludos
Víctor Cuervo
Eso está muy bien. Nos gusta saber que somos útiles.
Saludos.
anonima
MUY BUENO, ME HA SALIDO A LA PRIMERA.
Y LO NECESITABA PARA UN TRABAJO.
MUCHAS GRACIAS.
Víctor Cuervo
Nos alegra mucho escuchar eso. :-D
Saludos.
Jorge
Buenos dias/noches como puedo enlazar mi web con la carpeta de la parte Movil??gracias anticipadamente
Víctor Cuervo
Jorge, los enlaces solo pueden hacerse contra elementos que estén públicos, nunca contra elementos internos.
Saludos.
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
Es algo sencillo y que ayuda mucho. Y sobre todo que funciona muy bien para el posicionamiento.
Saludos.
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
¿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.
Tapilam
Es exactamente lo que estaba buscando, solo me falta agregarle un target blank y listo. Muchas Gracias!
Víctor Cuervo
Genial! Nos alegramos que te haya servido.
Muy bien lo del target blank para abrir en otra ventana. :-)
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.
Pajus
Perdonad, tengo el html asi, y no se por que no me va el href, alguna sugerencia?
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
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.
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
Hugo, depende del slider que estés utilizando. ¿Cuál utilizas? Saludos.
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
lineadecodigo
@carlos andres restrepo,
Intentamos que sean muy sencillos. Pero estamos abiertos a propuestas. ¿Sobre que te gustaría que escribiésemos?
lineadecodigo
@x,
Cierto. Que despiste.
Solucionado.
carlos andres restrepo
los articulos son algo basico para lo que se vive en internet actualmente
x
nice, pero te falto cerrar el tag