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
21-Julio-2008 a las 4:59 pm
mi imagen no funciona
6-Noviembre-2007 a las 8:17 pm
Hola Víctor, el paso que no veía ya lo veo. Lo que no veía era el segundo paso.
Muchas Gracias
6-Noviembre-2007 a las 12:28 pm
Raúl ¿Qué pasos no ves?
16-Octubre-2007 a las 5:13 pm
Hola,
quiero hacer esto que dices pero no se porque no veo todos los pasos a seguir.
Espero que me puedas ayudar.
Saludos!
23-Agosto-2007 a las 7:24 pm
Que alegria cuando las cosas funcionan bien. Me ha encantado.
Muchas gracias. Saludos.