 |
 |
 |
 |
|
 |
 |
 |
  Home Page Tous les scripts Proposer un script Recherche de script AJAX new! Cours de JavaScript Liste de discussion Forums CountUs myCircle Referencement Créat. de bannière 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 Kits graphiques Comparateur de prix Foire aux questions Les membres Devenir annonceur Faire un lien Contact Hebergement gratuit Le PHP facile Horoscope Comscripts WebmasterClub Activeartanima... Le village de ... L'écriteau Faro-dessing Images gifs an... Netsources Easy-script.com K i s s design Création de site 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 "PHP / mySQL" du jour par unreal Afin d'éviter de toujours devoir mettre des antislash '\' dans son code HTML à l'interieur de sa page PHP, vous pouvez utiliser la fonction addslashes qui les ajoutent automatiquement! http://ca2.php.net/manual/fr/function.addslashes.php Proposer votre mini-astuce | Archives des mini-astuces |
 |
 |
 |
 |
© 1999-2008 K-NETWORK - Tous droits réservés | CNIL N° 844440 | 24/07/2008 12:06:25 | Design by Studcrea | Gen. en 0.45 sec.
|
 |