Citation :Il est vrai que d'avoir son propre code est toujours plaisant, mais il est dur à chaque fois de réinventer la roue.
Le plugin jquery tooltip existe et est tres bien commenté, de plus il offre des options des options quasi complète.
C'est bien, mais j'ai envie d'apprendre et de comprendre comment fonctionne jQuery. Si j'utilise toujours des truc tout fait, jamais j'apprendrais quoi que ce soit. Hors, je serais un jour ou l'autre amener a créer mes propres effets, je dois donc maitriser les effets :p.
Bon, sa marche pas encore top top:
Voici le code complet, avec son implantation dans le jeu:
$(document).ready(
function ()
{
//Position de la souris
$().mousemove(function(e){
sourisLeft = e.pageX;
sourisTop = e.pageY;
});
}
);
Les fonctions info-bulle:
(function($) {
$.valmetips = {
freeze: false,
//Affichage de l'info-bulle
over_tips: function(ths, message, title) {
var moveHandler = function(e) {
//Div visible (e.PageX ou sourisLeft)
$("div#tips").css({top: (sourisTop+20)+"px", left: (sourisLeft+30)+"px"});
};
//On vide les piles
var outHandler = function() {
jQuery(ths)
.unbind("mousemove",moveHandler)
.unbind("mouseout",outHandler);
};
//je pointe sur le lien où est la souris
if (!$.valmetips.freeze)
{
//Injection du message
$("div#tips").append(title+message);
$("div#tips").stop().fadeIn("slow");
jQuery(ths)
//à chaque fois que la sourie bouge, j'exécute moveHandler
.bind("mousemove", moveHandler)
//quand je quitte le lien, j'exécute outHandler qui va enlever les actions
.bind("mouseout",outHandler);
}
}
,
cache_tips: function() {
if (!$.valmetips.freeze)
{
//On vide la div.
$("div#tips").empty();
//On la rend invisible
$("div#tips").stop().fadeOut("slow");
}
}
,
click_tips: function(ths, message, title) {
//on zappe tout.
jQuery(ths).unbind();
//On zappe la div
$("div#tips").empty();
//On ajoute le contenu
$("div#tips").append(title+message);
$("div#tips").stop().fadeIn("slow");
//on affiche la div
$("div#tips").css({top: (sourisTop)+"px", left: (sourisLeft)+"px"});
//On active le freeze
$.valmetips.freeze = true;
//sortie de l'infobulle
$("div#tips").mouseout(function () {
//On vide la div.
$("div#tips").empty();
//On la rend invisible
$("div#tips").stop().fadeOut("slow");
//On désactive le freeze
$.valmetips.freeze = false;
}
);
}
}
//Accès rapide
over_tips = function(message, title) {
$.valmetips.over_tips(this, message, title);
}
cache_tips = function() {
$.valmetips.cache_tips();
}
click_tips = function(message, title) {
$.valmetips.click_tips(this, message, title);
}
})(jQuery);
et enfin, une petite couche a moi pour facilité l'implantation dans le jeu:
/************ DEBUT de l'Overvalme **************************************************************/
/* Ceci est une surcouche permettant facilement de changer le rendu */
function overvalme(texte,titre)
{
return over_tips('<div class="infobulle"><div class="infobulle_gauche"><div class="infobulle_droit"><div class="infobulle_texte">'+texte+'</div></div></div></div>', titre);
}
function overvalme_clic(titre,texte)
{
return click_tips('<div class="infobulle"><div class="infobulle_gauche"><div class="infobulle_droit"><div class="infobulle_texte">'+texte+'</div></div></div></div>', titre);
}
function overvalme_large(texte,titre)
{
return over_tips('<div class="infobulle">'+texte+'</div>', titre);
}
/************ Fin de l'Overvalme ******************************************************/
Le problème sont:
- Apparait quelques passage de la souris le système ce block et ne fonctionne plus.
- Si je ne met pas de taille en hauteur, le fadeIn ne fonctionne pas correctement.
- Lorsque je quitte la première ligne de l'info bulle elle disparait, quelques soit sa taille réel.
Voila, je sais absolument pas d'ou sa vient, si quelqu'un veux bien éclairer ma lanterne. :heuuu: