 |
|
 |
 |
 |
|
 |
 |
 |
  Home Page Tous les scripts Proposer un script Recherche de script AJAX Cours de JavaScript Liste de discussion Forums CountUs myCircle ClickInText XooIt HTML / CSS PHP / MySQL Réferencement Graph / Présentation Toutes les astuces Ajouter un article
 
Hebergement web Referencement Sites webmasters XHTML - CSS2 PHP Affiliation - Pub FAI Annuaire webmaster Kit graphique Foire aux questions Les membres Devenir annonceur Faire un lien Contact Compteur live Créer un forum Le PHP facile Comscripts Liens sponsorisés Blog Page Rank Gifs animés, f... Poésie et cita... Azote.org - no... Easy-script.com Web creation ... Je crée mon site Outils de créa... Electroniq... K i s s design Créer son site... Les autres Votre site ici
? |
 Modifier l'apparence d'un texte au survole de la souris.
Vous aurez sans doute remarqué que sur certains sites webs lorsque vous passez votre souris sur un lien, une cellule de tableau, etc., la police, la couleur, etc. change. Je vais donc vous montrer 2 techniques pour faire ces manipulations. Première solution (la plus simple)
Méthode : changer directement le style au passage de la souris grâce à du javascript. Code html d'un paragraphe standard :
<p>Texte à modifier</p> Maintenant rajoutons les attributs onMouseOver (survole de la souris) et onMouseOut (la souris part) :
<p onMouseOver="SurvoleSouris(this);" onMouseOut="SourisPartie(this);">Texte à modifier</p> Enfin (et le plus "dur") le code javascript :
function SurvoleSouris(Objet) { Objet.style.color="white"; /* Vous pouvez bien sûr modifier la couleur "white" en ce que vous voulez, j'en ai mis une simple pour cet exemple */ Objet.style.backgroundColor="black"; /* idem */ } function SourisPartie(Objet) { Objet.style.color="black"; /* Couleur par défaut, quand la souris n'est pas sur le texte */ Objet.style.backgroundColor="white"; /* idem */ } Explication du code : Objet.style.color : permet de modifier directement le style d'un objet, en l'occurence la couleur du texte d'un paragraphe. Objet.style.backgroundColor : idem mais pour la couleur de fond. Vous pouvez bien évidemment modifier tout ce qui se rapporte au style (la police, la taille, etc.). Deuxième solution
Cette méthode consiste à modifier la classe de l'objet et non pas son style, plus pratique car il suffit de modifier le CSS si l'on veut remanier le site web. Code HTML :
<p class="text_standard" onMouseOver="SurvoleSouris(this);" onMouseOut="SourisPartie();">Texte à modifier</p> Code CSS :
.text_standard { color:black; background-color:white; } .text_modifié { color:white; background-color:black; } Code JavaScript :
function SurvoleSouris(Objet) { Objet.className="text_modifié"; /* Vous pouvez mettre la classe que vous voulez, et OUI, vous pouvez utiliser des lettres accentuées pour définir vos classe même si en théorie c'est mal vu, ce qui compte c'est que vous sachiez ce que vous faites, non ? :-) De plus "texte_modifie" ne veut pas dire grand chose alors que "text_modifié" est bien plus clair. */ } function SourisPartie(Objet) { Objet.className="text_standard"; /* Vous pouvez mettre la classe que vous voulez, celle utilisé par défaut */ } Conclusion
Grâce à ces exemples vous pouvez désormais créer des pages avec des styles dynamiques. Amusez-vous bien ! Annotations des visiteurs :
>> Poster une annotation sur cette astuce
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
De 
 |
 |
 |
La mini-astuce "Referencement" du jour par krucial Pour savoir combien de pages de votre site sont indexées dans Google, il vous suffit de taper, dans la boite de recherche du moteur : "site:http://www.votresite.com";. Proposer votre mini-astuce | Archives des mini-astuces |
 |
 |
 |
 |
© 1999-2012 EJS - Tous droits réservés | CNIL N° 844440 | 12/02/2012 15:05:42 | Design by | Gen. en 0.319 sec.
|
 |