J'ai mis en place le plugin dont je t'ai parlé, et sans le télécharger ! Youhou ! Maintenant, t'as droit à un tuto personnalisé rien que pour toi. Voilà quand même le lien de base. J'en ai profité pour modifier le code de la page d'accueil pour le faire fonctionner avec. Dans l'ensemble, c'est vachement plus simple que l'ancien, et pour que tu comprennes bien le nouveau (enfin la partie que j'ai changée quoi), je vais l'utiliser en exemple.



1^ère étape :


Tout d'abord, il faut installer le plugin. Pour cela, pas du tout besoin d'aller dans le template rassures-toi, normalement, tu as accès aux feuilles javascript. Dans :

Panneau de configuration -> Modules -> HTML & Javascprit -> Gestion des codes Javascript

tu vas créer un nouveau javascript avec l'option "Sur toutes les pages" de cochée. Là, tu lui donnes le nom de ton choix, c'est pour que tu saches ce que c'est et ensuite tu colles le code suivant.

Code:

(function(a){var b;a.fn.juizLinkinTips=function(c){b=a.extend({},e,c);a(this).each(function(){var c=a(this).attr("title"),d='<span class="juizTips">';d+=c.replace(RegExp(b.beforeURL+" (.*) "+b.beforeTitle+" (.*)","gi"),'<a href="$1" title="$2">$1</a>');d+="</span>";a(this).wrap('<span class="juizTipsWrapper"></span>');a(this).parents("span:first").prepend(d);a(this).removeAttr("title")});a(".juizTips").css("opacity","0");a("span.juizTipsWrapper").mouseover(function(){a(this).children("span.juizTips").stop(!0); a(this).children("span.juizTips").css("display")=="none"&&a(this).children("span.juizTips").css({display:"block"});a(this).children("span.juizTips").animate({opacity:b.gotoOpacity,top:b.gotoTop,left:b.gotoLeft},b.duration)});a("span.juizTipsWrapper").mouseout(function(){a(this).children("span.juizTips").delay(b.tipsDelay);a(this).children("span.juizTips").animate({opacity:0,top:"0px",left:"0px"},b.duration,function(){a(this).css({display:"none"})})})};var e={beforeURL:"go to the page",beforeTitle:"in order to", gotoOpacity:"0.9",gotoTop:"-17px",gotoLeft:"27px",duration:"300",tipsDelay:"300"}})(jQuery);
$(document).ready(function() {
            $(".testtest").juizLinkinTips(); 
        });

Dans ce code, ce qui importe sont les dernières lignes. Ce sont elles qui définissent les éléments concernés par le code. Tu peux en ajouter autant que tu veux, ces éléments cibles subiront tous la même mise en forme que celle définie par une feuille java. A mon avis, si tu créés plusieurs feuilles java en changeant le terme ".juizTips" par un autre du genre ".autremiseenforme", tu peux t'amuser à faire différentes infobulles. Il suffira de définir des cibles différentes bien entendu.

Code:

$(document).ready(function() {
            $(".testtest").juizLinkinTips();
        });

Ce sont les lignes dont je parlais juste au-dessus. Ici, cela concerne tous les éléments ayant la classe ".testtest". Tu trouves la classe dans la balise HTML entourant l'élément cible, et cela est possible sur de très très nombreuses balises. Il faut juste que la classe que tu attribues ait un nom tout attaché, sans espaces. Exemple : un lien et une image.

Code:

<a href="URL DU LIEN" class=".testtest"> Élément cible, ici entouré d'une balise de type lien</a>
<img scr="URL DE L'IMAGE class=".testtest">

La partie à changer dans le code javascript est entre parenthèses, après le $. Exemple :

Code:

$(document).ready(function() {
            $("img[title]").juizLinkinTips(); 
        });

Il s'agit du code de base du plugin, et il concerne toutes les images ayant un titre. Le titre des images se donne dans le code HTML de ces dernières, mais ne concerne pas qu'elles. Tu peux ainsi ajouter un titre dans énormément de balises HTML si tu le souhaites, et c'est là qu'est l'intérêt du plugin.

Code:

<img scr="URL DE L'IMAGE" title="TITRE DE L'IMAGE" />
<a href="URL DU LIEN" title="TITRE DU LIEN>Lien apparent</a>

Le problème de ce premier code, même s'il marche nickel, est qu'il concerne toutes les images ayant un titre justement. Sur forum-actif, beaucoup des images en ont et du coup, une magnifique infobulle pop-up sur les boutons et personnellement, je trouve que ça attire dix mille fois trop l'attention pour que dalle. Du coup, je te conseille la première version que je t'ai donnée, avec la classe. Il suffit de penser à l'ajouter quand tu veux mettre une infobulle.

Si tu ajoutes différentes cibles (les images ayant un titre, et les balises ayant pour classe ".testtest" et ".autremiseenforme"), cela donnerait :

Code:

$(document).ready(function() {
            $("img[title]").juizLinkinTips(); 
            $(".testtest").juizLinkinTips();
            $(".autremiseenforme").juizLinkinTips();
        });

2^ème étape :


Maintenant que tu as compris comment mettre en place le code et comment il marche (enfin, ce qu'il y a à modifier quoi), passons au CSS. Terrain beaucoup plus familier pour nous deux. Dans la partie CSS du forum :

Panneau de configuration -> Affichage -> Images et couleurs -> Couleurs -> Feuille de style CSS

tu vas coller le code suivant. C'est lui qui met en forme l'infobulle, comme tu t'en doutes.

Code:

/*Plugin infobulles*/

.juizTips {
  position: absolute;
  top: 0;  left: 0;
  display: none;
  width: 150px;
  padding: 7px;
  border: 3px solid #261704;
  font-size: 12px;
  line-height: 1.2em;
  color: #261704;
  background: #b39972;
  overflow: hidden;
  z-index: 500;
 
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
 
  -moz-box-shadow: 1px 1px 9px black;
  -webkit-box-shadow: 1px 1px 9px black;
  box-shadow: 1px 1px 9px #999;
  word-wrap: break-word;
}
.juizTipsWrapper {
  position: relative;
  display: inline-block;
  cursor: help;
}

Je ne pense pas avoir besoin de t'expliquer ce qu'il faut changer ou non, juste ne touche pas à la position, aux top et left, au display, à l'overflow, au z-index et à la partie du .juizTipsWrapper . Si tu as besoin d'aide, demande ^^ .


3^ème étape :


Passons au contenu même de l'infobulle maintenant. Parce que bon, j'ai expliquer comment tout mettre en place, mais j'ai pas encore dit comment le faire marcher. Et bien cela fonctionne avec de l'HTML pour commencer. En fait, ces infobulles sont programmée pour afficher le titre des éléments cibles. Yep, celui dont je parlais tout à l'heure. En prenant pour base le code que j'ai fait, c'est à dire celui avec la classe ".testtest", voici un exemple avec un lien et une image :

Code:

<a href="URL DU LIEN" class="testtest" title="Contenu de l'infobulle">Apparence du lien</a>
<img scr="URL DE L'IMAGE" class="testtest" title="Contenu de l'infobulle" />

Bon comme ça c'est déjà pas mal, ça fait un joli petit encadré pour quelques simples mots. Sauf que j'ai voulu voir si on pouvait le faire avec des infobulles du message d'accueil, avec les images et la mise en page des informations qui apparaissent en dessous. J'ai donc fait quelques tests, et j'ai pu constater que l'on peut très bien mettre en forme des titres. Les balises passent tout à fait, tant qu'il s'agit de balises de mise en forme et non de balise d'éléments particuliers. Je m'explique. Voilà le code correspondant à l'image et à l'infobulle de Prya :

Code:

<img src="http://img15.hostingpics.net/pics/863380PryaPA.jpg" class="testtest" title="<span><center><b> .: Prya :.</b></center><br /><justify>♦ Déesse du Printemps <br />♦ Admin polyvalente</justify><br /></span>" />

Si on le décompose, on obtient : tout autour la balise d'image, affectée d'un url pour qu'elle affiche l'image souhaitée, la classe et le titre. Et dans le titre, on a le contenu de l'infobulle, dans la balise span et mis en forme à l'aide de center, justify, b (bold) et br (retour à la ligne). Ca marche du tonnerre, hein ? Par contre, on ne peut pas mettre de lien comme il y avait pour le nom, du coup j'ai feinté cette contrainte en mettant le lien directement sur l'image.

Ce qui ne marche pas :

Code:

<img src="http://img15.hostingpics.net/pics/863380PryaPA.jpg" class="testtest" title="<span><center><b> .: <a href="http://andori.jdrforum.com/u54">Prya</a> :.</b></center><br /><justify>♦ Déesse du Printemps <br />♦ Admin polyvalente</justify><br /></span>" />

Ce qui marche :

Code:

<a href="http://andori.jdrforum.com/u54"><img src="http://img15.hostingpics.net/pics/863380PryaPA.jpg" class="testtest" title="<span><center><b> .: Prya :.</b></center><br /><justify>♦ Déesse du Printemps <br />♦ Admin polyvalente</justify><br /></span>" /></a>

Tu vois la nuance ? Donc maintenant, si tu veux mettre d'autres images d'admin, il suffira que tu copies ce dernier code et l'adapte. J'en ai terminé, si tu as la moindre question, poses la.