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

Publié le par PêUR

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.

 

Publié dans Webdev

Commenter cet article

noname 15/11/2007 10:16

salut'
j'ai atteri sut ton site grace a google et t example sont simple et marche bien.J ai trouver la moitie de la reponse a mon pb.
peux tu m aider pour l autre moitie?"
et est-il possible d'aggrandir le texte de dépard au passage de la souris, un effet de loup en gros?
commentaire n° : 3 posté par : earfalas (site web) le: 06/12/2005 21:22:42
Oui c'est possible!



Tu rajoute ces 2 lignes dans ton CSS:



a.zoom {text-decoration:none;color:#000;}

a:hover.zoom {font-size:200%;}



et en mode source d'un article:



mon message qui s'agrandit



A adapter selon tes besoin ;-)"

Sa c la premiere moitie.l autre c ke le zoom soit degrader autour des chiffres ou il y a le mouseover (123456)En gros si je passe la souris sur le nombre 3 il va faire un zoom mail il faut faire grossir aussi le 2 et le 4 (2 et 4 de la meme taille) mais moin que le nombre 3.
est-ce possible?
Et est-il possible d attribuer une photo a chaque chiffre de facon qu au mouse over dun chiffre un border encadre la photo voulu?
J espere que tu as compris ?

harold 16/10/2007 16:09

Bonjour,

Bravo pour ton script il est super!!!

Merci beaucoup

Jacky 13/10/2007 03:21

Bonjour PêUR.

Je cherche un simple script pour faire apparaître un texte ou une image avec la fonction "onclick".
Au lieu d'avoir un rollover, je clique sur un texte pour faire apparaître l'autre.

Pourriez-vous m'aider s'il vous plaît?
Merci infiniment.

MOI 22/08/2007 23:49

euhhh la carotte ?

antonoir 04/06/2007 18:26

salut,
ton truc est sympa, mais j'essai de mettre du style à l'intérieur des apostrophes, et ça ne marche pas.
Par exemple si je veux MOI en rouge dans SURVOLEZ-MOI, le code ne comprend pas mes span class ou span style même si je mets des antislash devant les \< \> \' \"
as-tu une solution?

De plus je mets une balise sur mon texte d'origine pour le faire changer de couleur au passage de la souris, lorsque je suis en mouseout, mes balises ne sont plus prises en compte pour les mêmes raisons qu'indiqué plus haut.
As-tu une solution

Merci

PêUR 06/06/2007 09:02

Si tu souhaites toutes ces fonctione en même temps (modif de texte + couleur...) il vaut mieux utiliser le javascript qui ira bien.