Comment changer de texte au passage de la souris en mode confiance et supérieur

Mise à jour le 22/01/2006 00:30

Cet article a pour but de modifier un texte au passage de la souris. Personellement je n'en vois pas trop l'intérêt mais:

1 / Un bloggueur me l'a demandé, donc ça doit avoir un intérêt
2 / Ca marche en mode confiance, avec Internet Explorer et Firefox
3 / Après 2 semaines sans nouvel article, il fallait bien mettre quelquechose
4 / Vous trouverez bien une utilité à cette méthode

1 / Le vif du sujet

La code suivant, à adapter selon vos besoins, est à saisir en mode source dans un article, un texte libre, l'entête ou le pied de page de votre blog:

HTML

<span onmouseover="this.innerHTML='Magique!!!!'" 
onmouseout="this.innerHTML='Survolez-moi'">Survolez-moi</span>

Survolez-moi

• onmouseover="this.innerHTML='...'" détermine la phrase qui va être écrite au passage de la souris (dans l'exemple: Magique!!!!)
• onmouseout="this.innerHTML='...'" détermine la phrase qui va être écrite après le passage de la souris  (dans l'exemple: Survolez-moi, soit la même phrase que celle par défaut)
• <span>...</span> entre ces 2 balises notez la phrase par défaut.

Pour ce code, sachez que la majeur partie des balises fonctionne:

<DIV> <SPAN> <H1> <H2> <H3>...

2 / Pour aller plus loin

• Vous pouvez appliquer le style, la couleur et la taille de police que vous voulez à ce texte, via l'attribut style

HTML

<span onmouseover="this.innerHTML='Magique!!!!'"
style="FONT-SIZE: 40px; COLOR: indianred; FONT-FAMILY: Comics" 
onmouseout="this.innerHTML='Survolez-moi'">Survolez-moi</span>

Survolez-moi

• Vous pouvez utiliser des phrases avec saut de ligne, pour cela vous devez intégrer une balise de saut de ligne <br/> mais il faudra veiller à "protéger" les caractères < et > par un backslash ""

HTML

<span onmouseover="this.innerHTML='Saut de<br/>ligne!!'"
style="FONT-SIZE: 40px; COLOR: orange; FONT-FAMILY: Comics" 
onmouseout="this.innerHTML='Survolez-moi'">Survolez-moi</span>

Survolez-moi

• Cette protection par backslash "" doit être aussi appliquée au caractère apostrophe " ' "

HTML

<span onmouseover="this.innerHTML='C'est magique<br/>Isn't it?'"
style="FONT-SIZE: 40px; COLOR: seagreen; FONT-FAMILY: Comics" 
onmouseout="this.innerHTML='Survolez-moi'">Survolez-moi</span>

Survolez-moi

3 / Exemples d'application

Question pour un champion:

Je suis un légume aprécié des lapins, je donne les fesses roses aux enfants, je peux être préparé en gateau, rapée ou vichy, je suis, je suis...je suis?

Si vous avez trouvé une utilisation originale à cette méthode, laissez moi un commentaire,   je vous citerez peut-être en exemple.