Snippet CSS/jQuery : Ajouter une icone sur vos liens pdf, doc, …

Envie de rajouter un petit icone pdf sur un lien menant à un fichier pdf ?

Voici comment procéder en CSS d’une part, et en Javascript à l’aide de jQuery d’autre part.

Une petite icone devant les liens menant à des documents Pdf, Doc, Excel ou autre c’est possible en CSS.

[css]
a[href$=".pdf"] {
background: url(../images/icons/pdf.gif) top left no-repeat;
padding-left:16px;
}
a[href$=".doc"] {
background: url(../images/icons/doc.gif) top left no-repeat;
padding-left:16px;
}
a[href$=".xls"] {
background: url(../images/icons/xls.png) top left no-repeat;
padding-left:16px;
}
[/css]

Notons qu’Internet Explorer 6 (oui encore lui), ne comprend pas ces sélecteurs css Heureusement il y a jQuery Il est en effet possible de faire la même chose.

On peut par exemple ajouter une classe spécifique à nos liens selon l’extension qui reprend les propriétés CSS ci-dessus :

[javascript]
$(document).ready(function(){
$("a[@href$=pdf]").addClass("pdf");
$("a[@href$=doc]").addClass("doc");
$("a[@href$=xls]").addClass("xls");
});
[/javascript]

Ou on peut utiliser ce petit plugin :

[javascript]
(function($){
$.fn.iconize = function(params){
// paramètres par défaut
var params = $.extend({
paddingLeft: ’16px’,
height: ’16px’,
pathToImage: ‘images’
}, params);

// process en returnant l’object
return this.each(function(){
var $$ = $(this);

if( $$.attr(‘href’).length>0 )
{
var width = $$.width();
var fichier = $$.attr(‘href’);
var extension = fichier.substr( fichier.lastIndexOf( "." ) + 1 );

$$.css({
‘backgroundImage’ : ‘url(‘ + params.pathToImage + ‘/’ + extension.toLowerCase() + ‘.png)’,
‘backgroundPosition’ : ‘top left’,
‘backgroundRepeat’ : ‘no-repeat’,
‘display’: ‘block’,
‘height’: params.height,
‘lineHeight’: params.height,
‘paddingLeft’: params.paddingLeft,
‘width’: width
});
}
});
};
})(jQuery)
[/javascript]

Et pour l’appeler :

[javascript]
// appel par défaut
$( "a" ).iconize();

// en spécifiant des paramètres
$( "a" ).iconize( { paddingLeft: ’32px’, height: ’32px’, } );
[/javascript]