 |
|
 |
 |
 |
|
 |
 |
 |
  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 Page Rank Gifs animés, f... Easy-script.com Le village de ... La cuisine de ... Web creation ... Créer son site... Azote.org - no... Les kits graph... Electroniq... Poésie et cita... 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 edg_webmaster Si vous utilisez une page avec beaucoup d'images, n'oubliez pas d'utiliser dans vos balises IMG les attributs TITLE et ALT avec des valeurs différentes pour chaque image. Google vous en sera reconnaissant et indexera mieux votre page. Proposer votre mini-astuce | Archives des mini-astuces |
 |
 |
 |
 |
© 1999-2010 EJS - Tous droits réservés | CNIL N° 844440 | 21/03/2010 07:42:05 | Design by | Gen. en 0.476 sec.
|
 |