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.

Noticias Relacionadas:

• 27-Agosto-2008 -- Listado de 100 trucos, consejos y manuales para blogs (4)
• 11-Mayo-2007 -- Cómo crear citas con estilo (2)
• 4-Mayo-2007 -- CSS Vista: Herramienta para ver los cambios de nuestro CSS en Internet Explorer y Firefox simultáneamente (2)
• 18-Marzo-2007 -- CSS Tab Designer: Programa para crear menús y listados en CSS (4)
• 31-Enero-2007 -- Menús dinámicos en css (2)

Etiquetas: css, diseño, flotante, imagen.

Si te ha resultado interesante esta noticia, puedes recibir las nuevas noticias del blog en tu correo. Puedes pinchar en este enlace para darte de alta.
Además de esto, también puedes seguir las noticias vía RSS .