Comment changer de texte au passage de la souris

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. Personnellement 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 / Çà marche en mode confiance, avec Internet Explorer et Firefox
3 / Après 2 semaines sans nouvel article, il fallait bien mettre quelque chose
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?

source:peutetreunereponse.over-blog.com