Étape 1: Inclure la librairie Scriptaculous
Dans votre page, entre les balises <head>, insérer le code suivant :<script src="http://www.pckult.net/prototype.js" type="text/javascript"></script>
<script src="http://www.pckult.net/scriptaculous.js" type="text/javascript"></script>
Étape 2: HTML
Ajouter un formulaire dans votre page. Pour les besoins de notre exemple, nous allons lui ajouter un champ texte ainsi qu'un second caché afin de retenir l'état de la boîte de message.Code :
** Attention au ID
<input type="text" name="name" id="name" onfocus="javascript:VoirMessage(1)"/>
<!-- 0 = Caché; 1 = Visible-->
<input id="msgstatus" type="hidden" value="0" />
<div class="msg" id="msg1" style="display:none;">
[...] Le texte de votre message [...]
<a href="http://www.pckult.net/#" onClick="javascript:CacherMessage(1)"> Fermer </a>
<div/>
Si vous avez plus d'un champ dans votre formulaire, il suffit de continuer la numérotation de vos messages en modifiant l'ID de celui-ci (id="msg1", id="msg2", id="msg3", id="msg4" ...). Ensuite il suffit de modifier le paramètre de la fonction VoirMessage(id) et CacherMessage(id) par le numéro du message à afficher.
Étape 3: JavaScript
Afin d'activer l'effet Scriptaculous, ajouter ce code dans votre page.<script language="javascript">
// Affiche le message lors du focus sur l'élément selon l'id passé en paramètre
function VoirMessage(idElement){
idEl= idElement;
statusMenu = document.getElementById('msgstatus');
if(statusMenu.value==0){
statusMenu.value=1;
Effect.toggle('msg'+idEl, 'appear'); return false;
}
}
// Cache le message selon l'id passé en paramètre
function CacherMessage(idElement){
idEl= idElement;
statusMenu = document.getElementById('msgstatus');
if(statusMenu.value==1){
statusMenu.value=0;
Effect.toggle('msg'+idEl, 'appear'); return false;
}
}
</script>
Voilà, rien de plus simple et l'effet est magnifique. Donc si vous désirez afficher certains messages dans vos formulaires, essayer ce truc, il est formidable et c'est à la mode!
Jeu de briques
Snake
Pacman
Bubble