Je continue avec les promesses, dans le billet de présentation de mon nouveau thème je vous expliquais que j'avais réussi à trouver le moyen d'identifier le type de fichier d'un lien et à en afficher l'icone correspondante.

Cette technique que j'ai découverte en surfant sur le web est simple mais ... ne fonctionne pas sous la version Internet Explorer 6. Allez je vous ressort ma petite phrase habituelle.
Je ne saurais que trop vous conseiller de naviguer sur internet avec un navigateur respectueux des standards tel que Firefox
Ca, c'est fait ;)

Voilà ce que cela peut donner

Icones et types de fichier

et voici le code css qui permet de réaliser cela

[css]
a[href $='.pdf'] { padding-left: 22px; background: transparent url(img/pdf.png) no-repeat center left;}
a[href $='.gif'] { padding-left: 22px; background: transparent url(img/image.png) no-repeat center left;}
a[href $='.png'] { padding-left: 22px; background: transparent url(img/image.png) no-repeat center left;}
a[href $='.jpg'] { padding-left: 22px; background: transparent url(img/image.png) no-repeat center left;}
a[href $='.doc'] { padding-left: 22px; background: transparent url(img/word.png) no-repeat center left;}
a[href $='.xls'] { padding-left: 22px; background: transparent url(img/excel.png) no-repeat center left;}
a[href $='.css'] { padding-left: 22px; background: transparent url(img/texte.png) no-repeat center left;}
a[href $='.txt'] { padding-left: 22px; background: transparent url(img/texte.png) no-repeat center left;}
a[href $='.php'] { padding-left: 22px; background: transparent url(img/php.png) no-repeat center left;}
a[href $='.zip'] { padding-left: 22px; background: transparent url(img/compress.png) no-repeat center left;}
a[href $='.rar'] { padding-left: 22px; background: transparent url(img/compress.png) no-repeat center left;}
a[href $='.tar.gz'] { padding-left: 22px; background: transparent url(img/package.png) no-repeat center left;}
a[href $='.pkg.gz'] { padding-left: 22px; background: transparent url(img/package.png) no-repeat center left;}
etc ...

Mais cela fonctionne aussi pour identifier des services de messagerie tels que Aim, Msn, Yahoo messenger, ICQ, etc ...

[css]
a[href ^="aim:"]  { padding-left: 22px; background: transparent url(img/aim.png) no-repeat center left;}
a[href ^="msnim:"] { padding-left: 22px; background: transparent url(img/msn.png) no-repeat center left;}
a[href ^="xmpp:"] { padding-left: 22px; background: transparent url(img/jabber.png) no-repeat center left;}
a[href *="icq.com"]  { padding-left: 22px; background: transparent url(img/icq.gif) no-repeat center left;}
a[href *="edit.yahoo.com/config/send_webmesg?"]  { padding-left: 22px; background: transparent url(img/yahoo.gif) no-repeat center left;}
a[href ^="skype:"]  { padding-left: 22px; background: transparent url(img/skype.png) no-repeat center left;}

Je pense même que l'on peut détourner l'identification des vidéos pour identifier les services web où sont hébergés ces vidéos. Ainsi vous pourriez mettre une icône qui identifie une vidéo de youtube, de Dailymotion ou bien encore une image de Flickr, etc ...
Je l'ai testé et ça fonctionne parfaitement

[css]
a[href *="youtube.com/"] { padding-left: 22px; background: transparent url(img/youtube.png) no-repeat center left;}
a[href *="metacafe.com/"] { padding-left: 22px; background: transparent url(img/metacafe.png) no-repeat center left;}
a[href *="flickr.com"] { padding-left: 22px; background: transparent url(img/flickr.png) no-repeat center left;}
a[href *="zooomr.com"] { padding-left: 22px; background: transparent url(img/zooomr.png) no-repeat center left;}
a[href *="imageshack.us"] { padding-left: 22px; background: transparent url(img/imageshack.png) no-repeat center left;}
a[href *="bubbleshare.com"] { padding-left: 22px; background: transparent url(img/bubbleshare.png) no-repeat center left;}

Tous les exemples que je vous ai mis quelques exemples, mais il en existe bien d'autres, sont extraits de ce site : pooliestudios. Vous y trouverez tous les exemples en image ainsi quun package à télécharger comprenant :

  • un fichier html
  • un fichier css
  • un dossier avec les icônes correspondantes

Alors à vos fichiers CSS

Enjoy ...