L'accueil Mon profil Contactez-moi Au travail Travaux personnels

 

html

html CSS

voir le mini site html / css

javascript

Javascript

voir l'ensemble des exercices

Formations Javascript

Modifie la couleur en fonction de la position de la souris

Code à placer entre les balises <head> et </head> :

<script language="javascript">
  <!--

  function modifie(evt) {
    vert = Math.floor((evt.layerY/window.innerHeight)*255);
    bleu = Math.floor((evt.layerX/window.innerWidth)*255);
    // modifier la couleur du div
    monDiv.style.backgroundColor = "rgb("+vert+", 153, "+bleu+")";
  }

  // capture les déplacements de souris
  window.captureEvents(Event.MOUSEMOVE);

  // execute la fonction modifie au déplacement de la souris
  window.onmousemove=modifie;

  //fin des script -->
</script>

Code à placer entre les balises <body> et </body> :

<div id="monDiv">
  <p> Vous devez… </p>
</div>

Donne le résultat suivant :

 

 Vous devez déplacer votre souris de droite à gauche et de haut en bas pour modifier la couleur du bloc.