Mejorar enlaces con CSS
Jueves, 28 de Septiembre de 2006Los selectores de CSS permiten aplicar un estilo en concreto a nuestras etiquetas basandose en el contenido de sus atributos. Así, podemos aplicar un estilo distinto a nuestros enlaces (etiqueta anchor A) en función del contenido de su atributo href.
Por ejemplo, con este ejemplo (sacado de anieto2k) obtenemos lo siguiente:
- Añadir una imagen external.gif a los enlaces externos (los que empiezan por http)
- Añadir una imagen email.gif a los enlaces a correos electrónicos (los que empiezan por mailto)
- Añadir una imagen en concreto en función de la extensión del recurso al que enlazamos. En este último caso, los archivos que acaban en .pdf tienen la imagen acrobat.gif
a[href^=”http:”] {
background: url(external.gif) no-repeat right top;
padding-right: 10px;
}
a[href^=”mailto:”] {
background: url(email.gif) no-repeat right top;
padding-right: 10px;
}
a[href$=”.pdf”] {
background: url(acrobat.gif) no-repeat right top;
padding-right: 10px;
}
A todos los estilos se les añade un padding a la derecha de 10 para que el texto no se solape con la imagen de fondo.
Enero 6th, 2007 4:49 pm
Hola, tienes una pagina genial. Te queria preguntar algo de javascript, lo llevo buscando mucho tiempo pero no lo encuentro! No se si me voy a saber explicar bien… necesito un codigo que en una pagina, una imagen cambie a los segundos por otra imagen del mismo tamaño pero que cada una contenga su propio link. Espero que me entiendas y espero tambien tu respuesta. Muchas gracias :D
Enero 6th, 2007 7:31 pm
[…] Hoy día de reyes, Sonia en un comentario me ha hecho una petición que creo que puede ser interesante: Te queria preguntar algo de javascript, lo llevo buscando mucho tiempo pero no lo encuentro! No se si me voy a saber explicar bien… necesito un código que en una pagina, una imagen cambie a los segundos por otra imagen del mismo tamaño pero que cada una contenga su propio link. Espero que me entiendas y espero también tu respuesta. […]