Tutoriel icones liens externes avec Mootools
J'ai ajouté sur le site un icone (à droite des liens) pour indiquer les liens externes (qui pointent en dehors du site) et j'ai reglé le bug des infosbulles qui ne s'affichaient pas sur IE (le bug de la sidebarre a normalement aussi disparu).
Pour revoir l'action au ralenti , cliquez sur la suite ;)
Si vous n'avez jamais abordé Mootools, je vous conseille de regarder ce tutoriel pour comprendre comment l'intégrer
Icones des liens externes
Alors pour ajouter les liens externes j'ai utilisé Mootools en ajoutant ceci dans ma CSS.Je me suis inspiré de cet article (ou j'ai trouvé l'image d'ailleurs).
-
.lien_externe {
-
background: url(images/icon_link.gif) no-repeat 100% 0;
-
padding: 0 20px 0 0;
-
}
-
-
.lien_externe:hover {
-
background: url(images/icon_link.gif) no-repeat 100% -200px;
-
padding: 0 20px 0 0;
-
}
Puis un peu de Javascript comme on a pu voir dans les autres tutoriels sur Mootools.
-
window.onload = function(){
-
-
//pr les liens externes
-
var href_lien = "";
-
//on récupere les liens de la page (dans le div #content pr moi)
-
$$('#content a').each(function(lien, i){
-
//teste s'il ya fardeen.biz (a remplacer par votre nom) dans le href du lien, on ignore la casse
-
if(!lien.href.test("fardeen.biz", "i") && lien.href != "" ) {
-
//exception pr les images, pas d'icone externe
-
//si le lien comporte une image
-
if(!lien.getElement("img")) {
-
lien.addClass("lien_externe");
-
}
-
}
-
});
-
-
}
Et voila ce que ca donne :
liens externe : Par ici les bonnasses
lien interne : Voir le Profil de Fardeen GHULAM
Infobulles
Pour les infobulles, j'ai simplement ajouté ce plugin Wordpress pour afficher les infobulles.
D'ailleurs je ne vous conseille pas de l'installer si vous avez déjà intégré Mootools à votre blog. Parcque ce plugin n'est pas fait avec Mootools et que ca genère du Javascript en plus pour rien (et que c'est pas super bien codé 
).
Pourquoi je l'ai fait moi ? Parcque j'ai eu la flemme de le recoder avec Mootools . Mais je vous conseille à vous, qui n'êtes pas fleimards, d'utiliser les infobulles de Mootools qui sont abordés dans ce tutoriel et des les habiller ensuite avec une belle classe CSS. Sinon il vous reste à consulter ce tutoriel en anglais.
Si vous remarquez un bug , merci de m'en faire part par le biais des commentaires. Merci beaucoup je vous aime ;)
Billets en relation
- Tutoriel Mootools 1.0 : Slider pour changer largeur interface
- Sortie de Mootools 1.1 et liens mootools
- Portfolio
- Mootools, liste de plugins et nouveautés
- Aide memoire Mootools
) et bien il te faut inclure le fichier Mootools.js -que tu auras préalablement téléchargé- avec :
