Geek the Planet


CSS no image

Published on julio 26th, 2009 | by Angelfire

0

How to: Crear enlaces inteligentes con CSS o Jquery

No voy a hacer mucha introducción al respecto (aunque si quieren leer un poco más les dejo el enlace a CSSBlog), se sabe que una imagen vale más que mil palabras, además es un how to relativamente corto, es bastante útil si queremos adornar un poco los enlaces de nuestro sitio sin estar poniendo imágenes por todos lados, basicamente existen 2 tecnicas para lograr un efecto como el siguiente:

enlaces decorados con css


Lo anterior es una imagen, pero posible hacerlo mediante CSS, como podemos ver cada tipo de fichero está asociado a un icono diferente, esta labora fue automatizada usando CSS, de manera que si por ejemplo ponemos un enlace a un fichero .doc, nos aparecerá el icono de word al lado, o si ponemos un archivo de audio nos aparecerá el icono de la nota musical, de que manera se hace esto:

a[href $='.pdf'] {
   padding-right: 18px;
   background: transparent url(icon_pdf.gif) no-repeat center right;
}
a[href ^="mailto:"] {
   padding-right: 20px;
   background: transparent url(icon_mail.gif) no-repeat center right;
}
a[href$='.phps'] {
	padding-right: 20px;
	background: transparent url(icon_phps.gif) no-repeat center right;
}
a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'], a[href$='.bzip'], a[href$='.ace'] {
	padding-right: 20px;
	background: transparent url(icon_archive.gif) no-repeat center right;
}

Ahora, como era de esperarse internet explorer 6 no soporta este nivel de CSS, por lo que claramente no podremos ver la decoración, en webdesignerwall nos dan la solución para esto, usando Jquery y con un sencillo script:

$(document).ready(function(){
         $("a[@href$=pdf]").addClass("pdf");
         $("a[@href$=zip]").addClass("zip");
         $("a[@href$=psd]").addClass("psd");
});

Fue bastante corto, pero si tienen dudas no mas pregunten.

Ver Más: Iconize textlinks
Add CSS class to text links

Tags: , , ,


About the Author

Systems Engineering, Computer Systems Specialist, Social Engineering Specialist. Social Media Analyzer. Usability and SEO enthusiasm (Este es mi perfil de Twitter...)



Comments are closed.

Back to Top ↑