Comment ai-je fais pour ajouter une icône après certains liens, et plus précisément tous les liens externes.
Et bien ceci n’est qu’une fonction javascript écrite à l’aide du plugin jQuery.
Comment ?
En voici le code source :
[javascript]
$("a[href^=\"http\"]").each(function(i){
$(this)
.not("[href*=\""+document.domain+"\"]")
.append(‘ <img src="images/external.gif" alt="" />’)
});
[/javascript]
Traduction : On récupère les liens http (donc on ne prend pas en compte les ancres), on ne considère que les liens externes, et on insère notre image à l’intérieur de notre balise a grâce à la méthode append().
On peut même en profiter pour forcer une ouverture dans une nouvelle fenêtre/nouvel onglet.
[javascript]
$("a[href^=\"http\"]").each(function(i){
$(this)
.not("[href*=\""+document.domain+"\"]")
.append(‘ <img src="images/external.gif" alt="" />’)
.bind(‘click’, function() {
this.target = "_blank";
});
});
[/javascript]
Edit : Solution plus concise de MAD
[javascript]
$(‘a[href^="http"]:not([href*="'+document.domain+'"])’)
.append(‘ <img src="images/external.gif" alt="" />’)
.attr(‘target’, ‘_blank’);
[/javascript]
Pas mal vu …
En plus concis, on aurait aussi pu écrire :
$('a[href^="http"] :not([href*="'+document.domain+'"])').append(' ').attr('target', '_blank');
Oups, j’ai un espace en trop avant le « :not » … désolé …
[...] l’article Customizer les liens externes, voici une petite fonction jQuery qui va vous permettre d’animer vos [...]
A noter que l’on peut aussi réaliser la même chose avec une touche de css, exemple:
a[target = '_blank'] {
padding: 0 0 0 20px;
background: url(« images/fleche.gif ») no-repeat left center; }
cependant les version antérieures à IE7 n’afficheront pas les images.