[CSS - JavaScript] – Exercice 1

Reprenez le tableau de l'exercice 2 du TD 1 (correction). Vous devez faire en sorte que, lorsque la souris passe au-dessus d'une ligne de données du tableau, la ligne soit surlignée en rouge foncé, et le texte écrit en blanc.

  1. Ajoutez un gestionnaire d'événement onmouseover sur chaque balise tr (ligne) du tableau. Ce gestionnaire s'active lorsque la souris passe au-dessus de l'élément qui le porte.
  2. En JavaScript, this.style désigne le style appliqué sur la balise courante. Dans chacun de ces gestionnaires d'événement, ajoutez le code qui fera passer la couleur de fond en rouge foncé: this.style.backgroundColor='darkred';
  3. Testez. Que se passe-t-il ? Pourquoi ?
  4. Le gestionnaire d'événement onmouseout s'active lorsque la souris quitte l'élément qui le porte. Modifiez votre code, de sorte de restaurer la couleur de chaque ligne lorsque la souris la quitte.
  5. Testez.
  6. Faites de même pour faire passer le texte en blanc lorsque la souris passe dessus.

[CSS - JavaScript] – Exercice 2 – Aide contextuelle

Reprenez le formulaire de l'exercice 3 du TD 1 (correction). Vous devez afficher un message d'aide lorsque la souris passe au-dessus d'un des champs du formulaire (la teneur des messages importe peu, n'y passez pas trop longtemps !). La propriété CSS display peut vous être utile.

[XHTML - CSS - JavaScript] – Exercice 3 – Formulaires et couleur d’arrière plan

Dans cet exercice, vous devez modifier la couleur d’arrière plan d’un document selon la saisie d’un utilisateur.