Micaela 30 de septiembre de 2008 a las 14.02
   Imprimir artículo
elWebmaster.com

Cómo convertir una imagen de fondo en un link


cssAl realizar un sitio web puede llegar a pasar que nos encontremos ante la necesidad de hacer que una imagen de fondo se convierta en un link, esto puede ocurrir cuando el logo esta siendo usado como fondo en la cabecera del sitio y queremos que, como cualquier sitio bueno, el mismo act√ļe de link a la p√°gina de inicio.

Con el siguiente truco CSS que les traigo, les resultará extremadamente sencillo convertir una imagen que esté cumpliendo el rol de papel tapiz en nuestro sitio en una en la que se pueda realizar clic hacia un link.

Imagen con texto encima

Partiendo del siguiente código HTML:

  1. <div id="header"></div>
  1. #header {
  2.   background: #fff url(images/header.png) no-repeat;
  3.   height: 101px;
  4.   width: 800px;
  5. }

Todo lo que tenemos que hacer para lograr esto es, en el mismo c√≥digo, a√Īadir el link al que deseamos que la imagen nos redireccione entre los tags div de nuestra cabecera y a√Īadir al CSS la propiedad ‚Äúdisplay: block‚ÄĚ para forzar al link a llenar todo el espacio.

Para manejar aquellos navegadores que todavía no soportan CSS deberíamos agregar un texto que indique que el span contiene un link que ocultaremos con nuestro CSS.

El resultado final de nuestro código es el siguiente:

  1. <div id="header"><a href="http://mysite.com"><span>MySite.com</span></a></div>
  1. #header a {
  2.   background: #fff url(images/header.png) no-repeat;
  3.   display: block;
  4.   height: 101px;
  5.   width: 800px;
  6. }
  7. #header a span {
  8.   visibility: hidden;
  9. }

Y, así de sencillo, habremos convertido nuestro fondo en una imagen en la cual podremos agregar links perfectamente.

Enlazando √ļnicamente una imagen

Cuando no tenemos nada de texto sobre la imagen y lo √ļnico que queremos lograr es que al hacer clic sobre la imagen de fondo, se abra un link, entonces podemos usar otro recurso. Este es el caso del logo de un blog de WordPress donde no queremos utilizar texto para el nombre del blog, sino tan solo la imagen.

En este ejemplo, nuestra imagen va a ser el fondo de un div. Lo que vamos a hacer es agregarle al div el evento onClick:

  1. <div id="header" onclick="location.href='http://www.elwebmaster.com/'">

Esto har√° que cuando alguien haga clic sobre el div, autom√°ticamente se abra en la misma p√°gina el link “http://www.elwebmaster.com/”.

El problema del evento, es que el cursor no va a cambiar cuando el usuario del blog pase el mouse por encima del div. O sea que no va a saber que al hacer clic visitará un enlace. Para resolver este problema vamos a tener que agregar una línea al archivo CSS.

Ahora, en el archivo CSS hacemos lo siguiente:

  1. #header {cursor:pointer}

Ahora, cada vez que un usuario pase el mouse por encima del div, el cursor cambiará, haciéndole notar que se trata de un enlace.

Fuente: Attackr.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (31)

  1. Ramsés Román dice:

    Simplemente genial. Gracias. He buscado esta forma de convertir imágenes de fondo en enlaces web desde hace tiempo, y hasta ahora consigo la información detallada y muy bien explicada. Felicidades.

  2. Juan dice:

    Muchas gracias por esto!

  3. may dice:

    no me sirvi√≥ de nada porque lo que yo deseeo es poner un link a una imagen que est√° como background sin nada de texto, q chiste con texto es f√°cil la cosa es s√≥lo la imagen….Gracias en todo kso

  4. Alejandra dice:

    Gracias may. Ampliamos la información incluyendo el casos que mencionas. Espero que te sirva ahora!

  5. may dice:

    Graciassssssss muchas gracias…….son lo m√°ximo…..iincluir√© esta p√°gina a mis favoritosss….!!:=):D

  6. Captain Zion dice:

    muchas gracias por tu explicacion me sirvio de mucho :)

    Saludos desde mexico

  7. Alomaximo dice:

    Lo que yo intento hacer es enlazar el background del body por medio de un link a otro sitio. es para utilizar el fondo de manera publicitaria. No me sirvio de mucho este tutorial pero se que me servira en un futuro cuanque tenga esta necesidad exacta.

  8. Guidus dice:

    y siquiero que una parte de la imagen no+ tenga la url, algo asi como aun area shape??? se peude??

  9. Sibrinca dice:

    Fant√°stico. Me has salvado la vida con algo tan sencillo y tan bien explicado. Millones de gracias.

  10. Fernando dice:

    B√°rbaro. Muy simple y bien explicado. He buscado por cantidad de horas y finalmente una respuesta adecuada! Muchas Gracias.

  11. Mario dice:

    Perfecto! un problema menos…

  12. edgardo dice:

    mmm eso de la imagen unicamente se hace con javascript

  13. jose Aldana dice:

    Sencillamente eres el mejor!!
    estuve buscando por mucho tiempo como poder resolver mi problema y con tu sencilla pero muy efectiva explicacion lo logre!!
    muchas gracias x tu aporte…

  14. Edito dice:

    Te estoy eternamente agradecido, excelente aporte, justificaste las 2 horas que tarde arreglando el link del logo de un theme de wordpress.

  15. Yago dice:

    Simplemente genial.
    F√°cil, con los dos ejemplos (con y sin texto) y v√°lido.
    Muchas gracias

  16. mikel dice:

    Muchas gracias por el truquillo, solo una cosa… al usar javascript para el link, el favicon cambia… podri solucionarse?
    Un saludo

  17. alexa dice:

    Muchas gracias por tu aporte muy bien explicado y simple, la solución adecuada para un problema en concreto

  18. gabriel dice:

    muchas gracias, simple y genial, con otras soluciones toca editar mucho codigo.

  19. Andres Gonzalez dice:

    Excelente Gracias por tan importante aporte aunque sencillo no deja de ser un dolor de cabeza para muchos incluyendome a mi.. FelicidadES!!

  20. NENE dice:

    Gracias. ¬ŅY sabes c√≥mo hacer para que abra en otra ventana?

  21. elsuperlea dice:

    Muy buena, me sirvió en su momento.

    Yo lo que uso y lo dejo por aquí por si alguien en su momento entra como yo lo vea, es:

    Supongamos que tenemos un div que se llama logo.
    En la p√°gina principal llamamos a ese div de esta forma.

    En el css tendremos entonces una imagen de background para ese div de esta forma:

    #logo {background:url(../images/logo.png); width:100%; height:95px;}

    Le seteamos una imagen de fondo a ese div y un alto y ancho dependiendo de lo que queramos.
    En nuestra p√°gina veremos entonces el logo como background en el div que hemos puesto.

    Ahora vamos a hacer que nuestro logo al tocarlo vaya a la p√°gina principal.
    Lo que haremos primeramente es agregar lo siguiente a nuestro div.

    Nuestro div era así:

    Y vamos a agregarle lo siguiente:

    De esta forma tendremos el link ya puesto en nuestro div, pero… a√ļn no estar√° disponible en nuestra p√°gina principal.

    Lo que debemos hacer es agarrar nuestro CSS
    #logo {background:url(../images/logo.png); width:100%; height:95px;}

    y agregarle el “a” y el display:block;
    Quedaría así:
    #logo a {background:url(../images/logo.png); width:100%; height:95px;display:block;}

    Lo que hacemos de esta forma es que nuestro div llamado logo, al mostrase como bloque tome el ancho y alto que le pusimos al principio (que generalmente ser√° el ancho y alto del background, pero no necesariamente).
    Al aplicarle el a, estamos diciendo que los “links” dentro de nuestro div #logo tomen estas propiedades.

    De esta forma debería quedarles en su página el div con el logo como background y el link funcionando.

  22. elsuperlea dice:

    El mismo blog me borro los ejemplos de los div, pucha

  23. borja dice:

    Gracias! qué trucazo!

  24. Enrique Oromendia dice:

    Excelente solución, me ha sacado de un buen apuro, muchas gracias

  25. Marc dice:

    Gracias men! me vino de perlas ūüėČ

  26. Richard dice:

    Buenisimo! muchas gracias!

  27. alex dice:

    muy interesante…pero….
    si en vez de un logo se trata de una lista de iconos [men√ļ] entonces la cosa se complica bastante no ?

  28. TheDivingLady dice:

    Muchísimas gracias. Un solución brillante por lo simple que es.

  29. iphone juegos dice:

    ¡Enorme! Me ha caido de perlas. Una excelente solución.

    Un abrazo,

    Rafael Serna

  30. Alberto dice:

    Muy bueno.
    Pero si deseo que se abra en una pantalla nueva que hago ?

  31. Segismundo dice:

    Gracias amigo. Llevo largos momentos buscando esta solucion.
    Genial.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder