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.

Compártelo:

victor lopez Sobre mí Esta noticia ha sido creada el 3 mayo 2007 a las 18:53 en InicioActualidadCómo crear un enlace con una imagen flotante y si quieres puedes comentarla.
Si te ha gustado Cómo crear un enlace con una imagen flotante y esta web, puedes seguirla a través de Facebook, Twitter y también puedes recibir las nuevas noticias de la web en tu correo pincha en este enlace para darte de alta. Además también puedes seguir las noticias por RSS.