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:
Y finalmente poner donde queramos(dentro del body) el id, en la parte de nuestra página donde queremos que vaya:
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.
Noticias Relacionadas:
Etiquetas: css, diseño, flotante, imagen.
Además de esto, también puedes seguir las noticias vía RSS
.
15 Comentarios en “Cómo crear un enlace con una imagen flotante”
Mostrando: « 2 [1] Mostrar todos
Mostrando: « 2 [1] Mostrar todos
23-Agosto-2007 a las 9:39 am
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.
23-Agosto-2007 a las 9:36 am
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
22-Agosto-2007 a las 8:14 am
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.
22-Agosto-2007 a las 8:02 am
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.
21-Agosto-2007 a las 8:24 pm
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
24-Junio-2007 a las 7:32 pm
[...] PDTA: Ayer se me olvidó poner todos los enlaces de la entrada, así como dar las gracias a Victor por inspirar la idea gracias a su blog. [...]
4-Mayo-2007 a las 9:18 am
[...] PDTA: Ayer se me olvidó poner todos los enlaces de la entrada, así como dar las gracias a Victor por inspirar la idea gracias a su blog. [...]
3-Mayo-2007 a las 7:08 pm
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.
3-Mayo-2007 a las 7:06 pm
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
3-Mayo-2007 a las 6:59 pm
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.