Cómo crear un enlace con una imagen flotante

The-RockeR me preguntaba lo siguiente: ¿Podrías decirme cómo se hace para poner un enlace en la imagen flotante de abajo a la derecha?

Bueno pues aprovecho y creo un post explicándolo paso por paso, para que pueda servir a todos los que lo quieran saber.

Antes de nada, lógicamente tendremos que crear un «ancla» para movernos a la zona donde queremos que vaya cuando hagamos click en la imagen.

Para ello crearemos un enlace donde queramos, simplemente creamos el atributo name con el valor top (en este caso), lo podemos hacer de la siguiente manera:


Lo primero es crear en nuestra hoja de estilos css un identificador para ese enlace, donde vamos a determinar las propiedades del mismo.

Podemos crear este atributo css del enlace de la siguiente manera:

a#pie
{
position: fixed;
right: 0;
bottom: 0;
display: block;
height: 48px;
width: 48px;
background: url(img/arriba.gif) bottom right ; /
text-indent: -999em;
text-decoration: none;
}

La imagen la podemos cambiar por la que queramos, la ruta que he puesto de ejemplo es img/arriba.gif , vosotros la podeis cambiar por la que querais.

Lo segundo es irnos al footer e incluir el siguiente código html:

[html][/html]

Y finalmente poner donde queramos(dentro del body) el id, en la parte de nuestra página donde queremos que vaya:

[html][/html]

Tengo que decir que esto funciona en Firefox y en Explorer 7.0 (y superior). No he probado en navegadores como Safari, Opera y similar, aunque creo que debería de funcionar.

Victor

Me llamo Víctor López y nací en Zaragoza el 16 de Diciembre de 1984.Esta web la monté exactamente el 23 de Mayo del 2005 con la idea de publicar mis experiencias personales, cosas curiosas que veía a mi alrededor (tanto en Internet como en mi vida) y el poder tener mi propio espacio web en la red. Si quieres puedes ver las estadísticas del año 2010.Ingeniero Superior en informática (terminé la carrera en 2006), desde pequeño ya estaba totalmente convencido a lo que me iba a dedicar en mi vida, la informática. Quizás porque mi padre tenía un Spectrum y me pegaba horas trasteándolo o quizás porque desde pequeño siempre me han gustado “los chismes”. El caso es que empezó a gustarme este mundo de la informática.Profesionalmente soy Analista-Programador Senior en PHP y me dedico al análisis, desarrollo y programación de páginas web y al desarrollo de aplicaciones (principalmente web en PHP, empecé a programar en el año 2002 en PHP), creación, alojamiento, optimización (diseño, SEO, publicidad), puesta en marcha de webs y potenciándolas.Actualmente soy Lead Integration Engineer en EnGrande.com – BudGetPlaces.com, además de formar parte de Homein.com (anteriormente he trabajado en Atrapalo.com, Camyna.com y Sync.es).Socio fundador de Coompy.es Alquilar habitación – Compartir piso.Partidario del software libre y usuario asiduo de Ubuntu y CentOS. Fui usuario de Mac pero ahora ya he vuelto al buen camino con Linux (Ubuntu distro).Sobre mi filosofía de vida, te invito a que leas este artículo: “Tu eres el resultado de ti mismo“. Si lo lees, entenderás mi punto de vista de la vida.Intento estar lo más lejos posible de la monotonía y considero mi trabajo como un hobby, me gusta aprender cosas nuevas cada día y afrontar nuevas metas y proyectos.En mi tiempo libre me gusta practicar cualquier deporte (el fútbol especialmente), me gusta competir (sea el ámbito que sea), los coches, las buenas películas/series y viajar.Personalmente considero que lo primero en esta vida es la salud y las personas, dejando atrás otras cosas, como puede ser el dinero, la fama y todas esas chorradas, que cuanto más las tienen las personas, más las quieren y menos les importan los demás. Y creo que el respeto y educación es fundamental.Pues eso es todo, un breve resumen de mi persona.Si te quieres anunciar en mi blog, contactar conmigo ya sea para la contratación de mis servicios, ofertas, agradecimientos, quejas, insultos, amenazas y/o similares, puedes mandarme un correo cuando quieras.Mi correo personal de contacto es: http://helektron.com/contacto-personal/Puedes seguir este blog por Google Plus, Facebook, Twitter, RSS y por mail.

21 comentarios en “Cómo crear un enlace con una imagen flotante

  • el 11-septiembre-2014 a las 11:18 pm
    Permalink

    Always love the quotes you add which inaavirbly are so appropriate. You must have taken this photo early: I cannot imagine Mexico City with an empty street!

  • el 11-septiembre-2014 a las 11:05 pm
    Permalink

    I feel the same as Kate. Such unique quliaty, texture, composition, depth, innovation in your images. Quite exceptional. I’d love to hear you talk about how you achieve this. This is a wonderful series.

  • el 9-septiembre-2014 a las 4:20 am
    Permalink

    I was curious if you ever cdsinoered changing the structure of your blog? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having 1 or two images. Maybe you could space it out better?

  • el 8-septiembre-2014 a las 11:35 pm
    Permalink

    It will outline four of Billings pssoeorifnal exterminators giving you basic information about each, and then vacuum it up. A more stringent method of organic gardening pest prevention. Most times a second application of Orange Guard Water Based Indoor/Outdoor Home Pest Control Planting basil among tomatoes will control tomato hornworms. Peachtree Pest Control, Inc. 406 671-1600 local phone numbers If you don’t treat the problem squirrels destroying your plants then a simple garden pesticide can be purchased at your local nursery.

  • el 3-abril-2010 a las 8:05 am
    Permalink

    Hola, por favor, me ayudarias con algo»¦ este post me ha puesto a idearme muchas como aplicar las barras flotantes a mi blog.. lo que queria saber es si hay forma de dividir la imagen flotante para que por ejemplo tenga dos partes y cada parte vincule con urls diferentes. Me cachas? osea, lo que quiero es que la barra flotante tenga dos links, uno para chatear y el otro para registrarse. Ayudame 🙁 por fa.

  • el 21-julio-2008 a las 4:59 pm
    Permalink

    mi imagen no funciona 🙁

  • el 6-noviembre-2007 a las 8:17 pm
    Permalink

    Hola Víctor, el paso que no veía ya lo veo. Lo que no veía era el segundo paso.

    Muchas Gracias 🙂

  • el 6-noviembre-2007 a las 12:28 pm
    Permalink

    Raúl ¿Qué pasos no ves?

  • el 16-octubre-2007 a las 5:13 pm
    Permalink

    Hola,

    quiero hacer esto que dices pero no se porque no veo todos los pasos a seguir.

    Espero que me puedas ayudar.

    Saludos!

  • el 23-agosto-2007 a las 7:24 pm
    Permalink

    Que alegria cuando las cosas funcionan bien. Me ha encantado.
    Muchas gracias. Saludos.

  • el 23-agosto-2007 a las 9:39 am
    Permalink

    La velocidad de carga ya depende de tu conexión y tu servidor. En código no puedes cambiar nada, a no ser que estemos hablando de librerías….

    Me alegro que te funcione 🙂

    Saludos.

  • el 23-agosto-2007 a las 9:36 am
    Permalink

    Ya he conseguido que se vea en el explorer 7, era algo que puse mal, aunque tarda en cargar la página. ¿Hay algo para acelerar el proceso de carga de la página?
    Gracias.
    Saludos Tessa

  • el 22-agosto-2007 a las 8:14 am
    Permalink

    Muchas gracias por tu pronta respuesta. Tengo internet explorer 7.0.5730.11 128 bits y no logro que me funcione en internet, o sea cuando lo subo al servidor, aunque si funciona en mi pc, tanto en el explorer como en el firefox.
    Porfa, me podrias poner un correo explicandomelo detalladamenta?, ya que no tengo mucha idea sobre esto.
    Un cordial saludo y gracias de nuevo.

  • el 22-agosto-2007 a las 8:02 am
    Permalink

    Hola Tessa,

    En Internet Explorer solo lo podrás ver en la versión 7, ya que en la 6 aun no trabaja con capas, con lo que no sirve la «técnica» que comento.

    En Firefox y Explorer 7, podrás comprobarlo que funciona de maravilla.

    Aun así, desconozco si hay algún método para que también funcione en el 6.

    Saludos.

  • el 21-agosto-2007 a las 8:24 pm
    Permalink

    Hola
    Estoy tratando de crear un enlace a una imagen flotante, he seguido todos tus pasos pero no me funciona en el explorer y si en el firefox, aunque el efecto que hace en tu pagina tampoco lo he podido conseguir.
    Por favor me puedes ayudar?
    Muchas gracias y un saludo
    Tessa

  • el 3-mayo-2007 a las 7:08 pm
    Permalink

    Juraría que lo puse bien…en fin, en vez del «a» que cierra al final, podrías poner una / justo después de «nofollow».
    Un saludo y re-re-gracias.

  • el 3-mayo-2007 a las 7:06 pm
    Permalink

    Vale, ya conseguí hacerlo. Me bastó con poner el código justo antes de la etiqueta , así no modifica nada.

    Por cierto, creo que tu enlace quedaría «más potito» así:

    Un saludo y re-gracias xD

  • el 3-mayo-2007 a las 6:59 pm
    Permalink

    Es como lo estaba haciendo, lo que pasa que al hacerlo así, las primeras palabras del pie de página me desaparecen, y creo que es cosa de ese indent de -999… Seguiré probando. Gracias por contestar.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *