Comment changer le bouton sur mouseover

Vous pouvez animer du texte, des images et des boutons sur votre page Web à l`événement MouseOver. Il vous permet de manipuler le code HTML en fonction des actions de l`utilisateur. MouseOver travaille main dans la main avec l`événement MouseOut. MouseOver fonctionne lorsque votre souris survole un objet, tandis que MouseOut fonctionne lorsque l`objet est plus sélectionné. Vous pouvez utiliser MouseOver pour modifier le texte et la couleur des boutons avec quelques lignes de javascript.

  • Démarrez un éditeur de texte, tel que le Bloc-notes, TextPad ou EditPad. Sélectionnez "Fichier" et "Ouvrir" dans le menu et double-cliquez sur le fichier HTML que vous souhaitez modifier.

  • Faites défiler jusqu`à la tag de votre fichier, où le bouton va.

  • Insérez le code suivant pour modifier le texte du bouton avec votre souris:




  • Remplacer "Cliquez pour me changer" avec le texte original qui affiche avant la MouseOver. Remplacer "On" avec le texte qui apparaît lorsque vous roulez sur le bouton. Remplacer "Off" avec le texte qui apparaît lorsque la souris roule sur le bouton.

  • Insérez le code suivant pour changer la couleur du bouton avec votre souris. La couleur d`origine de la touche est rouge.

    onmouseover = "this.style.backgroundColor = `blue`"

    onmouseout = "this.style.backgroundColor = `jaune`" />

  • Remplacer "rouge" avec la couleur d`origine de la touche avant la MouseOver. Remplacer "bleu" avec la couleur qui apparaît lorsque vous roulez sur le bouton. Remplacer "jaune" avec la couleur qui apparaît lorsque la souris roule sur le bouton.

AUTRES

» » » » Comment changer le bouton sur mouseover