Hacer que una imagen funcione como link : El Escaparate de Rosa

Estás en: Inicio » Trucos imagenes » Hacer que una imagen funcione como link

Hacer que una imagen funcione como link

Me lo han preguntado varias veces y es muy sencillo de conseguir.
En primer lugar hemos de obtener la url de la imagen que funcionará como link, para ello la subimos a un alojamiento de imágenes o al propio Blogger.
Una vez obtenida la url de nuestra imagen, la colocamos en este sencillo código, donde dice URL_DE_IMAGEN y en el mismo código, colocamos la página que queremos linkar, es decir, la dirección web que se abrirá al pinchar sobre la imagen, en URL_DE_WEB:

<a href="URL_DE_WEB"><img src="URL_DE_IMAGEN"></a>

Ejemplo

<a href="http://eternamentecabreada.blogspot.com">
<img src="http://img373.imageshack.us/img373/4449/89653287xy8.png"></a>

Para que el enlace al pinchar en la imagen se abra en página nueva, añadiremos el target="_blank" al final del enlace:

<a href="URL_DE_WEB" target="_blank"><img src="URL_DE_IMAGEN"></a>

Entradas Relacionadas:

78 comentarios:

Felicituri 1: Gracias Rosa.; 5/9/07
Liliana 2: ¡Hola,soy muy nuevita en esto de los blogs, para cuando te encontré, ya llevaba unos cuantos meses de buscar, soy una persona bastante "mayor" y todo cuesta el doble. Me gustaría que visities nuestros Blogs y nos ayudes un poquito más. http://lagallineta.blogspot.com; 5/9/07
andrespepo 3: Depuntazo dice: Gracias Rosa por el consejo, ya li hice y me gustó, pero tengo otra inquietud, hay alguna forma para quitar la barra de blogger o de personalizarla?, un saludo y de nuevo gracias!!!; 5/9/07
Anónimo 4: Depuntazo, mira en estos tres posts que hablo sobre eso...

http://elescaparatederosa.blogspot.com/2007/05/navbar-personalizada.html

http://elescaparatederosa.blogspot.com/2007/03/navbar-barra-blogger-mgica.html

http://elescaparatederosa.blogspot.com/2007/01/ocultar-que-no-quitar-la-barra-de.html; 5/9/07
Anónimo 5: lagesio, bienvenida, te visitaré!; 5/9/07
Unknown 6: Gracias por este dato, lo tenía mal en mi blog y ya lo corregí.
También te dejé un regalo en mi blog, no es por devolverte la mano solo es en agradecimiento por tus ayudas para mejorar mi blog. Un gran abrazo Pau; 6/9/07
Fricky 7: Hola Rosa, gracias por tus sugerencias son de verdad ùtiles.
Buena suerte.; 6/9/07
Tango 8: Hola Rosa. También sería bueno ofrecer la posibilidad de la imagen con link externo con el famoso target=_blank.

Mi humilde sugerencia

Un abrazo

bromito; 7/9/07
Noelia Cabo 9: Gracias por este post! La verdad es que soy nueva en esto y llevaba ya un buen rato buscando la forma sin conseguirlo :s Un saludo, y felicidades por un blog tan útil!; 5/12/07
Alejandro Sánchez Fuentes 10: Amigos, estoy empesando con mi blog, y me gustaria que me ayudaran en saber como poner una imagen en "añadir un elemento a la pagina" ya que me sale el nombre de la pag pero no se como ponerle una imagen, muchas gracias y espero su respuesta, seguire intentando; 28/12/07
Anónimo 11: Alejandro, veo que ya lo has conseguido, aunque sigue saliendo el título del blog ¿es porque así lo quieres o es que no sabes como quitarlo?...; 28/12/07
AGUSTIN 12: Hola Rosa, como te va?estoy armando el blog de una ONG y tengo varias consultas para hacerte...asique hoy voy a hacerte una..he leido mucho de tu blog pero todavia no si si es que no esta o no veo la explicacion de como hacer para que una imagen sea usada como link, pero, una imagen que yo subo desde mi pc y la añado al sidebar se entiende? añado un elemento a la pagina, elojo subir una imagen, desde mi pc y esa quiero usarla como link a otra web..como logro esto? desde ya muchisimas gracias, saludos.
Agustin; 4/1/08
Anónimo 13: Agustin, acabo de publicar una entrada con la respuesta, he pensado que tal vez le interesaría a alguien más...:-); 5/1/08
Anónimo 14: hola e utilizado tus ayudas pero ahora quisiera saber si podriamos intercambiar links el mio es
http://superelectronika.blogspot.com/
en mi blog encontrras la imagen para que me linkees ojala aseptes; 9/2/08
Anónimo 15: que pen por aberlo puesto tantas veses es que lo undi mucho y no me di cuenta; 9/2/08
Anónimo 16: ola rosa gracias por tus ayudas me han servido bastante ya que recien estoy empresando en el mundo del blog no me a resultado esta cosas de los codigo nose porque pero al pinchar me da erro sabes que pued pasar he hecho todos los pasos correctos saludos rodrigo te dejo mi msn dipox_19@hotmail.com; 13/2/08
Anónimo 17: rodrigo, lo más fácil es que hayas olvidado colocar alguna de las comillas...; 13/2/08
Anónimo 18: Hola,

Ante todo dar las gracias por esta página, a la que he acudido innumerables veces en busca de ayuda.

Tengo un problema con hacer que una imagen sirva de enlace a mi blog. Cuando pongo en la barra lateral el código con mi página seguido del código con la imagen que deseo usar, siempre me aparece la fotografía, pero lo que quiero es que aparezca el código HTML en texto, como he visto en muchos sitios, para que los que así lo deseen puedan copiarlo y pegarlo directamente en su página.

Muchas gracias por todo.

Julio
www.findelmaltratoanimal.blogspot.com; 24/4/08
Anónimo 19: Julio, pincha arriba en el menú de etiquetas, donde dice "Botón de enlace" ahí hay varias entradas que te ayudarán seguro.; 24/4/08
Fin Maltrato Animal 20: Hola de nuevo Rosa,

acabo de leer ahora mismo tu respuesta aunque sea del día 24 - mucho Blog y poco tiempo por desgracia -. Pues siguiendo tu consejo por a pinchar en ese botón y espero encontrar allí una entrada que me ayude.

Muchas gracias por todo.

Salud.

Julio; 29/4/08
Anónimo 21: Hola Rosa necesito tu ayuda lo que pasa es que hago los pasos y no me sale me sale es un cuadrito con una X, Ayudameeeee....... Y Subo La Imagen Y nada y formato o adonde la subo no c ayudamme

Gracias; 30/5/08
Nienca 22: Hola Rosa, que tal? Desde que entre en tu blog la verdad que he podido hacer del mio un show!
Ha comenzado como un proyecto para la universidad y se ha transformado en mis ganas de que sea el mejor.
Quisiera consultarte, hace mucho que me gustaria hacer dos cosas:
1- poner como opcion esto, que nos dejen comentarios en el blog como estoy haciendo ahora y que figueren como un listado en el mismo cuerpo del blog.
2- crear una imagen .gif (o sea, con movimiento) en el titulo del mensaje, ya que he encontrado como cambiar ese titulo.
Ojala me puedas ayudar con esto.
Gracias!; 30/5/08
Anónimo 23: Andres, si subes la imagen en formato jpg a cualquier alojamiento no tendrías que tener ningún problema...; 30/5/08
Anónimo 24: Nienca, como ves en mi blog los comentarios están expandidos debajo de la entrada solo en las página secundarias, no en la principal, lo que si he hecho, es aplicar un pequeño "truco" para que cuando alguien pinche en "comentarios" este enlace le lleve a la página de etiquetas, donde verá la entrada completa con sus comentarios expandidos debajo. Puedes ver como hacer esto, aquí:
http://elescaparatederosa.blogspot.com/2007/10/sistema-de-comentarios-sin-ventanas.html

En cuanto a la otra consulta, no entendí exactamente que es lo que quieres, mira en esta entrada si es algo así:
http://elescaparatederosa.blogspot.com/2007/05/imagen-antes-del-ttulo-de-las-entradas.html; 30/5/08
lichazul 25: rosa

porfavor
como puedo poner una imagen
en el buscador o reemplazar la "B" de bloguer
así como tú tienes esa señora en la silla frente al computín y luego la http://y tu url en chiquitito allá arriba

tengo esta imagen
http://www.muchografico.com/avatares/_avatar_created.php?color=9&name=mis+escritos&font=01&size=10&color_r=0&color_g=0&color_b=0&HexInput=

no sé si sirva:-)
help me plisssssss:-)

gracias; 7/6/08
Anónimo 26: Elisa, mira en esta entrada:
http://elescaparatederosa.blogspot.com/2007/04/favicon-para-el-blog.html; 7/6/08
Producción 27: Hola Rosa, encuentro increible tu blog, de mucha ayuda, lamentablemente yo llevo muy poco en esto y sigo tus instrucciones para cualquier cosa y no me sale... tienes alguna entrada que me ayude a ponerme al dia con este lengüaje... desde ya muchas gracias; 14/8/08
Anónimo 28: Producción, todas las entradas te serán de ayuda, simplemente probando y con paciencia, irás descubriendo que comienzas a entender...; 14/8/08
Anónimo 29: Hola...me gustaria saber si me podrias exar un cable...

El problema que tengo es ke me gustaria hacer que la imagen de mi cabecera de mi blog, sea un link a la pagina principal del mismo blog...

Probe cosas, pero me daba error...

Gracias; 14/8/08
Anónimo 30: Jona, tu imagen de cabecera está incluida directamente en el css de la plantilla, aquí:
#header-wrapper {
background: #e0e0e0 url(http://i331.photobucket.com/albums/l467/futbollerfc/bannerII.png) no-repeat left;

Por eso ahí no es posible añadirle el enlace...

¿Has probado a subirla desde Blogger? de está manera el enlace se incluye de forma automática.; 14/8/08
Solgadie De Papel 31: Hola Rosa, quisiera saber si es posible de alguna forma cambiar la pantalla de inicio del blog, mi blog es nuevo y tengo pocas entradas y lo estoy arreglando todos los dias pero para llegar a lo que quiero me falta un poco, entonces ... hay alguna forma de cambiar la primera pantalla del blog??? gracias denuevo; 15/8/08
Anónimo 32: Soluciones Gráficas Gadie, si te refieres a cambiarle "el aspecto" del diseño al que ya tienes, pues has de ir poco a poco, buscando cosillas para ir modificando, arriba en mi menú, en la etiqueta "Plantillas" hay muchas entradas sobre cambiar diseños, como aplicar imagen a los títulos o bordear las entradas...etc.

Si te refieres a hacerlo de una vez, pues cambiando la plantilla por otra que te agrade más y ya está.; 15/8/08
Solgadie De Papel 33: hola otra vez, y una pregunta mas, como puedo cambiar el color del texto de mi menu de etiquetas (los botones)ya ke puse los que tenias tu, pero, con el color de fondo no van muy bien y kisiera ponerlas en rojo o negro... porfa, responde ... gracias; 15/8/08
Anónimo 34: Soluciones Gráficas Gadie , si te refieres a cambiar el color del texto del boton o su tamaño, eso se hace en el código, el tamaño donde dice:
font-size:80%;

Y el color del texto, donde dice:
color:
Se cambia el código que va después de color: por el código del color que quieras.

Si te refieres a cambiar el color de las pestañas en el paso 6 de la entrada pone el enlace a los otros modelos.; 15/8/08
Anónimo 35: Gracias Rosa por solucionarme el problemilla este de la cabecera...; 16/8/08
Solgadie De Papel 36: hola rosa, me sirvio de mucho tu ayuda, ahora me aqueja otra duda: como puedo poner una de mis entradas para que sea la primera que visiten, o sea, cuando pongan la direccion http://.....blogspot.com se vea la entrada que yo quiero, atentamente y siempre agradecido.

Mauricio; 23/8/08
Anónimo 37: Soluciones Gráficas Gadie , cualquier entrada a la que pongas la última fecha de publicación se verá siempre la primera, para hacer que la entrada que tu quieras se vea en primer lugar aunque sigas publicando nuevas entradas, la única opción es cambiarle la fecha por una fecha posterior a la que acabas de publicar...

Es decir, tu puedes editar una entrada, cambiarle la fecha, colocarle una fecha posterior a la última que has publicado y entonces esa entrada "subirá" al primer lugar.

Si lo que quieres es hacer una especie de texto de bienvenida o incluir una información relevante para tus visitas y que siempre esté sobre la primera entrada sin tener que modificar nada, entonces te recomiendo usar un elemento "Texto" y colocarlo sobre las entradas (arrastrando en la parte de edición).; 24/8/08
Unknown 38: muchas gracias por el dato me ha servido mucho, me rompia la cabeza tratando de hacerlo
denuevo muchas gracias; 31/8/08
Anónimo 39: Hola rosa.. como va? la verdad q exelente blog.. estoy viendo como se puede hacer, para q las entradas tengan imagenes con link (SIN TEXTO).. lo vi en este blog (en la parte izquierda "entradas antiguas") http://chilemoviezz.blogspot.com/
mi idea es hacer algo parecido.. estaba pensando en subir las imagenes y a cada una ponerle el link de entrada .. pero.. queria saber si hay alguna otra manera.. Gracias..; 15/10/08
Anónimo 40: GuiShop! , creo que te refieres a esto:

http://elescaparatederosa.blogspot.com/2007/03/iconos-de-navegacin.html; 16/10/08
Anónimo 41: exelente rosa! muchisimas gracias; 16/10/08
ELPLANETADELCELULAR 42: gracias rosa no se que seria de mi blog sin el tuyo,todo me es de gran utilida

pasa por mi blog y mira el enlace que puse del tuyo

graciasssssss
http://elplanetadelcelular.blogspot.com; 1/11/08
ELPLANETADELCELULAR 43: rosa como hago para subir la foto a internet por que la abro pero me pone el nombre de mis documentos o algo asi como la subo????

http://elplanetadelcelular.blogspot.com; 1/11/08
Anónimo 44: EL PLANETA, mira aquí:
http://elescaparatederosa.blogspot.com/2008/10/usando-la-url-correcta-en-imageshack.html; 1/11/08
ELPLANETADELCELULAR 45: gracias rosa por la info pero apenas deje el comentario me di cuenta que en la entrada decia una pagina de la foto de cabreada y la saque de hay soy el primo de facundo(el dueño de elplantadelcelular)
mi primo solo tiene 13 años y aveces no entiende algunas cosas

vean su pagina:
http://elplanetadelcelular.blogspot.com

o su perfil; 1/11/08
Anónimo 46: EL PLANETA, tranquilo no pasa nada, puede preguntar las veces que necesite.:-); 1/11/08
Ruahidy Lombert 47: Hola puedes chequear mi blog http://ruahidylombert.blogspot.com/. Todavia lo trabajo.; 7/4/09
Unknown 48: Rosa, cómo puedo poner una imagen de este tipo:
http://img36.imageshack.us/img36/523/printx.gif como link para que un usuario pueda imprimira la página? Ya vi tu ayuda en http://elescaparatederosa.blogspot.com/2007/02/imprimir-pgina.html pero no lo encontré, saludos; 2/10/09
Anónimo 49: Jared No entiendo bien...si es sustituir el texto del enlace "Imprimir página" por esa imagen, lo único que has de hacer es eso, eliminar el texto y en su lugar colocar la llamada a la imagen:

<img src="http://img36.imageshack.us/img36/523/printx.gif "/>; 2/10/09
Sabri Aides 50: Hola Rosa, como hago si esa imagen del link quiero que quede mas pequeña ? hay alguna forma de incluir esa orden en el codigo que pasaste?
desde ya gracias!
Sabrina; 30/10/09
Anónimo 51: Sabrina Aides Lo más lógico sería usar una imagen al tamaño que quieres.
Aunque también puedes condicionar en el código el alto y ancho de la imagen:
<a href="URL_DE_WEB"><img src="URL_DE_IMAGEN&quot width="50px" height="50px";></a>; 30/10/09
Sabri Aides 52: Gracias Rosa por tu respuesta. Y una pregunta mas, espero que no te moleste. Quisiera alinear la imagen a la derecha o centrada (actualmente me aparece a la izquierda). Como pongo este código? gracias!!; 5/11/09
Anónimo 53: Sabrina Aides "Mete" el código en un div, así:

<div style="text-align: center;>
aqui el código
<div>

Así irá al centro, para la derecha cambia center por right; 5/11/09
Evangelina 54: Hola Rosa, quisiera saber cómo insertar una imagen con link externo, pero que abra en otra pestaña o ventana. Probé de varias formas, pero aún no lo he logrado. Mi blog es: http://conserlenguaje.blogspot.com
Gracias de antemano; 19/12/09
Anónimo 55: Evangelina Es justo lo que esta entrada explica :o; 19/12/09
Anónimo 56: hola le escribia si me podia ayudar con eso del blogger....es para mi mama pero no entinedo

este e smi correo clarinasolyluna@hotmail.com
mellamo sachiko soy de japon hasta luego y gracias; 25/1/10
Ariel Mode 57: hola rosa mira tengo un problema que puse unos link con imagenes pero, lo malo que me salen con un fondo negro al pasar el raton hay posibilidad de quitar ese efecto, me serviria muchisimo si se puede hacer gracias de ante mano saludos; 31/1/10
CMYK Diseño Grafico y Publicidad 58: me encanto es muy sencillo; 22/2/10
Anónimo 59: rosa ami me pasa lo mismo que a andres me sale u cuadro y no me abre la imagen; 2/3/10
Anónimo 60: rosa ya lo logre estaba cogienod mal el url de la imagen gracias; 2/3/10
goles y mujeres 61: gracias ,pero como lo puedo colocar link a las fotos de mis entradas? por fa ayuda gracias; 10/3/10
Rosa 62: mujeres woman Cuando subes la imagen a la entrada si pinchas en la pestaña HTML del editor ves ahí su código... hay una url en el a herf= del código, borra esa url y coloca la que quieras para esa imagen.; 11/3/10
waio 63: Hola rosa, queria saber en que parte del xml ingreso el codigo para linkear la imagen. Muchas Gracias!; 29/4/10
Anónimo 64: waio Pues en un gadget HTML/Javascript por ejemplo...; 29/4/10
Anónimo 65: Hola Rosa
Gracias por tu informaciòn en serio que la necesitaba..
me sirvio mucho.. solo tengo una pregunta.quiero utilizar varias imagenes con link pero al utilizar tu còdigo me salen con un espacio entre cada imagen.. quisiera saber si hay otra forma para que me salgan una despuies de la otra y que salgan unidas pero con diferente enlaces,, algo asi como un menu de imagenes.. mil gracias

saludos; 21/6/10
Anónimo 66: Haru Tendrías que clocar el código de todas seguido, como si todo fuese una misma línea.; 21/6/10
Anónimo 67: MEC1992 Es exactamente esto que explico aquí, para cada imagen este código con sus urls correspondiente.; 12/9/10
Supernovas 68: Hola de nuevo Rosa, ¿que seria de mi blog sin ti???
Veras, tengo un problema y no sé como puedo solucionarlo.
En el blog tengo el truco de "impedir guardar imagen". En alguna ocasion, cuando he querido que alguien pudiera ver una imagen he creado un enlace pero con letras, es decir, poniendo "pincha aqui", pero en esta ocasion quiero hacerlo con las imagenes. Al pinchar con el boton izquierdo no se abren y me gustaria que se pudiera. Lo que he hecho ha sido subir la imagen a otro blog de pruebas y crear un enlace con la imagen. Hasta aqui todo ha ido bien, pero el problema viene porque quiero hacer dos enlaces con dos imagenes y no me deja, siempre aparece el ultimo enlace.
Enntonces, mi pregunta es... ¿no se puede crear varios enlaces con varias imagenes?? Si pudieras ayudarme...; 11/10/10
Anónimo 69: Supernovas No entiendo demasiado bien que quieres decir... pero si son dos imágenes con un enlace cada una lo harías tal como aquí:
<a href="URL_DE_WEB" target="_blank"><img src="URL_DE_IMAGEN"></a>

Eso para una imagen y lo mismo para la otra...; 11/10/10
Supernovas 70: ah!! creo que lo he solucionado. Es que estaba haciendolo a traves de enlaces con la imagen, que otras veces lo he hecho, pero con dos imagenes no me dejaba.
Muchas gracias!!; 12/10/10
Trast-Ascrasi 71: Muchas gracias Rosa, tus explicaciones son para mí de gran ayuda y utilidad.
Besotes!
Trast
http://trasteando-trasteando.blogspot.com/; 17/10/10
D4R3 72: muchas gracias; 17/10/10
Yarabaya 73: saludos Rosa, tengo un problema con lo de insertar imágenes en las entradas , cada vez que inserto una imagen me aparece enmarcada y con un fondo blanco, como puedo hacer para poder subir imágenes tal cual , o gifs de fondo transparente sin que me tenga que salir este marco. http://arequipatradicional.blogspot.com/

gracias de antemano; 17/11/10
Anónimo 74: Yarabaya Localiza esto en tu plantilla:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {

Y elimina la etiqueta del comienzo:
.post-body img,

Usa Vista previa antes de guardar para ver si ya no está el borde...; 19/11/10
Yarabaya 75: Muchísimas gracias rosa saludos de Perú; 19/11/10
Christroad 76: Graicas Rosa muy sencillo pero SUPER UTIL, Muchisimas gracias ese detalle es super original.

BENDICIONES

atte: Christian (Christroad); 20/12/10
Anónimo 77: Hola Rosa, tengo un sitio de fondos para escritorio, y me gustaría que cuando hagan clic sobre las imágenes; estas abran en una nueva pestaña.
Y me gustaría que me ayudaras en esto.

http://backgroundultimate.blogspot.com; 30/12/10
Anónimo 78: BackgroundUltimate Cuando subes una imagen desde el editor de Blogger a una entrada, el código resultante es algo así:
<a href="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/TR2uLRayETI/AAAAAAAAIfE/qc3ORzUROw4/s1600/Dibujo.JPG" target="_blank" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="200" width="174" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/TR2uLRayETI/AAAAAAAAIfE/qc3ORzUROw4/s200/Dibujo.JPG" /></a>

Fíjate en negrita que he marcado lo que tienes que poner, donde y como, para que se abra en pestaña nueva...; 31/12/10

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.