JeuWeb - Crée ton jeu par navigateur
[Javascript] Bulle d'aide - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Javascript] Bulle d'aide (/showthread.php?tid=3516)



[Javascript] Bulle d'aide - Holy - 08-01-2009

Bonjour à tous ^^

Je viens vous présenter un petit script perso qui tourne assez bien et qui permet de créer des bulles d'aide sympa pour votre site.

Le rendu est le suivant: [Image: Sans-titre-2_u1231441714.jpg]

J'ai une archive rar avec tout ce qu'il faut dedans, y compris une petite démo du script Smile

Si vous voulez voir la démo avant de télécharger le script, vous pouvez passer vite fait sur la page inscription des Terres de Cy, histoire de voir à quoi ça ressemble une fois en ligne ^^

Voici le lien: Archive du script

Si vous utilisez le php, je ne peux que vous conseillez de créer une fonction pour permettre le placement rapide de la bulle, parce que chaque fois tout retaper, c'est un peu long et ennuyant. Allez, je vous refile la mienne:
Code PHP :
<?php
// Affichage d'un tips flottant
function details($conseil, $level = 1){
return
'onmousemove="details(event, \''.addslashes($conseil).'\', \''.$level.'\');" onmouseout="details(event, \'off\', \''.$level.'\');" ';
}
?>
Le level permet de fixer la "hauteur" du tooltip, ça va de 1 à 3.

Si vous l'utilisez, j'aimerais que vous placiez dans vos crédits mon pseudo (Lulin ou Holy) avec un petit lien vers mon site http://www.terresdecy.com, ça serait sympa ^^' Mais c'est pas obligatoire Wink


RE: [Javascript] Bulle d'aide - Nodark - 08-01-2009

Merci beaucoup de ta contribution à JeuWEB,n'hésites pas en poster d'autres!


RE: [Javascript] Bulle d'aide - Melimelo - 09-01-2009

Sympa de partager, chouette script !!


RE: [Javascript] Bulle d'aide - Holy - 09-01-2009

Merci pour vos deux commentaires ^^

J'ai pas cité ce qui fait que cette infobulle est "plus cool qu'une autre" (:heuuuSmile, c'est le fait qu'elle soit personnalisable et qu'elle s'agrandit sans aucun soucis en fonction de la taille du texte (c'est pas simple de coupler les deux).

Si vous voulez mettre un autre template, il faut adapter le tout, mais c'est possible sans trop de problèmes normalement ^^

Le template est en fait couper en trois:
- Côté gauche de la bulle
- Fond générale de la bulle
- Côté droit de la bulle

Il faut chipoter au CSS et au fichier js (faut juste modifier une largeur à un endroit) pour que ça fonctionne. Ca me fait penser que je devrais m'arranger pour créer une bulle d'aide "vraiment" facilement personnalisable, de sorte qu'on puisse créer une petite bibliothèque de templates. Enfin cela dit, si vous gardez les mêmes largeurs d'images, ça ne posera absolument aucun soucis (forcément).

Si jamais vous créer d'autres skins, n'hésitez pas à poster le résultat ici tiens. Moi j'ai une ou deux alternatives à l'info-bulle toute verte qui doivent trainer sur mon ordi ^^


RE: [Javascript] Bulle d'aide - My Hotel - 09-01-2009

Le rendu est vraiment bien, je vais peut-être l'ajouter à ma page d'inscription, avec ton nom bien sur! J'hésite entre l'infobulle comme ton script ou l'aide dans un cadre séparé...