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
Enjoy this article?
Mes liens Delicious
- XBMC
Un media center open source super puissant. - xJSFL - The rapid development framework for extending Adobe Flash
Framework JSFL pour rendre l'IDE Flash pluis puissant. - AS3 Game Gears | Boost your tools!
Excellent blog qui recense toutes les librairies Flash interessantes par catégories. - SCVNGR’s Secret Game Mechanics Playdeck
Belle liste de mécanique de jeu pour le game designer. - FreeApps Download, All Must-have Free Apps in One Click | FreeNew
Installeur d'applis gratos. - Selenium web application testing system
Outil pour automatiser des taches dans le navigateur. Cool pr les test automatiques. (meme en shell) - Fake - Mac OS X Web Browser Automation and Webapp Testing Made Simple.
Navigateur automatisé pour mac. - Acapela Group - Voice as a Service
API pour transformer du texte en voix. Plus de choix de voix que sur Google, mais payant. - Bad Word List Text Sanitation On-Line Web Service at theFilthyList.com
API en ligne pr censurer les insultes. - Ian Bogost - Cow Clicker
Une excellente crique et analyse sur les "jeux" sociaux. - Best Online Collaboration Tools 2010 - Robin Good's Collaborative Map - MindMeister Mind Map
Une belle liste d'outils collaboratifs. - We Are Hunted - The Online Music Genre Charts
Découvrir les artistes émergents basé sur des stats sociales. Site simple et efficace. - cjsignals - Project Hosting on Google Code
Framework Observer AS3 calqué sur Signals de Robert Penner pour remplacer les events. - doomsdaysoundsystem - Project Hosting on Google Code
API de son AS3 par les gars de DoomsDay. - face.com developers site. face.com for developers
API de detection de visage. Compatible Flash.
Articles récents
- Mon dernier jeu : Kiwitiki – Tikiwi Rescue
- Fuck you Steve Jobs !
- Hell’s Kitchen remporte deux prix Boomerang !
- Aidez moi à gagner !
- Quelques réflexions du PDG de Google
Mon super hébergeur
Archives
- June 2010 (1)
- April 2010 (1)
- December 2009 (1)
- November 2009 (3)
- September 2009 (1)
- July 2009 (1)
- April 2009 (2)
- January 2009 (1)
- October 2008 (1)
- July 2008 (1)
- June 2008 (1)
- May 2008 (2)
- February 2008 (2)
- December 2007 (2)
- November 2007 (2)
- October 2007 (4)
- September 2007 (1)
- August 2007 (1)
- June 2007 (1)
- May 2007 (1)
- April 2007 (1)
- March 2007 (5)
- February 2007 (2)
- January 2007 (5)
- December 2006 (5)
- November 2006 (10)
- October 2006 (2)
December 4th, 2006 - 00:55
Salut , je pense qu’il doit manquer de precision dans ton tuto parceque ca marche pas chez moi ! !
Escque y a un une bibliotheque a ajouté ou quoi que ce soit ??
Comment tu presente tes liens pour mettre en oeuvre ce tuto ?
juste avec …
Bref , si tu n’y voie pas d’inconvenient donne nous plus de details plizz
Merci d’avance (tu a un nouveau fan de tes tutos
)
December 4th, 2006 - 07:57
Merc pour ce petit tuto fort sympathique. Je crois que “bulle de survol” est plus apporpié que “icone”.
December 4th, 2006 - 10:52
Merci pr le Feedback
J’ai fait quelques modif qui devraient vous éclairer
@Jarodxxx : Pour la présentation des liens je ne fais rien de spécial. Ce ne sont que des < a href = " url " > tout simple. L’icone est ajoutée que si fardeen.biz ne se trouve pas dans le Href.
December 4th, 2006 - 16:45
en realité ma question se portais plus les includes ou les importation qu’on faire ?( en admettant que ma page actuel soit :
Je met quoi ici ??
Desolé pour ces question de noobz
December 4th, 2006 - 16:51
Ami noob , si tu avais pris le temps de lire l’autre tuto (je conçois qu’il est long mais il est très instructif, lis le c’est bon pour ta santé
) et bien il te faut inclure le fichier Mootools.js -que tu auras préalablement téléchargé- avec :
< script type= " text/javascript" src="mootools.release.83.js" >< /script >
En esperant t’avoir répondu
December 4th, 2006 - 17:06
J’ai dut ratter une etape
J’ai copier coller ton tuto, j’ai telecharger le fichier mootools dans lequel j’ai mis TOUT ES les option pour ne rien louper
et cette @#è°+’{} d’infobulle ne veux pas apparaitre ! !
December 4th, 2006 - 17:47
Je viens de reagir sur un point … Le dessin de la bulle elle meme , il sort d’ou ?!?
Ajax le genere ? c une image a la base ?
PS: je suis toujours bloqué sur les liens qui veulent afficher d’infobulle
Puis je te demander (excuse mon audace) de creer un fichier texte contenant le code complet pour reussir ce tour de passe passe …
Si il etait possible d’avoir tout le code de A à Z avec un lien d’exemple … je t’en serais extrement reconnaissant … et je suis sur que d’autre en profiterons aussi
December 4th, 2006 - 20:27
J’ai enfin trouvé ! ! !
il manquais l’apel des fichiers suivant :
bt.css
BubbleTooltips.js
C’est entirement ma faute ! ! J’espere que ma debilité aura servie a quelqu’un :$
*********PS**************
Pour ce qui sont aussi naze que moi voici le code :
December 4th, 2006 - 20:56
Content de voir que tu as trouvé
J’ai bien précisé que c’est un plugin WordPress pour les bubbleTooltips et que l’appel à ces fonctions est automatiquement ajouté lors de l’installation du plugin.
Pour les bubbleTooltips sans WordPress il suffit d’aller sur cette page : http://www.web-graphics.com/mtarchive/001717.php
PS:
Le code dans les commentaires est interdit désolé mais c’est pour eviter les conneries et le spam.
December 6th, 2006 - 10:58
Bravo pour ce nouveau tutorial, ca serai de le soumettre dans tutmarks
December 6th, 2006 - 11:35
Je viens de le faire
May 30th, 2007 - 15:59
Je constate un bug d’affichage pour les liens externes sous IE6, notamment pour “plugin WordPress pour afficher les infobulles” et tous les liens qui ont des sauts de ligne.
May 30th, 2007 - 16:30
Merci pr la precision
Mais les visiteurs qui utilisent IE6 ne m’interessent pas