Gestion des évènemnts en HTML/CSS⚓︎
Dynamiser ses pages web
Les pages que nous avons pu écrire en HTML sont toutes statiques et figées. Nous avons vu qu'il était possible de créer des formulaires permettant à l'utilisateur d'interagir de façon sommaire avec la page et une nouvelle page est générée en fonction des réponses à l'aide de PHP.
Mais il est possible d'aller plus loin dans l'interaction sur le web. Pour cela il faut utiliser les évènements. Un évènement est un signal qui est émis par le navigateur lorsqu'une action est effectuée, par l'utilisateur, le navigateur ou certaines API. Ces évènements peuvent correspondre à un clic de souris, au survol d'un élément d'une page, à la modification d'une valeur dans un formulaire, un changement d'onglet... Il sont généralement liés à des fonctions JavaScript afin de réaliser des actions spéciales.
Contrairement à PHP qui s'exécute sur le serveur, ces actions s'exécutent directement dans le navigateur. C'est donc beaucoup plus rapide et très réactif. Il est alors possible de modifier en temps réel le contenu d'une page en fonction des actions de l'utilisateur. Cela permet d'avoir des pages plus vivantes et dynamiques.
Un exemple simple d'évènement
Si les évènements sont généralement utilisés par JavaScript, certains sont utilisables en pur HTML/CSS. Il est, par exemple, possible de modifier l’aspect d’un objet sur lequel passe la souris en utilisant la pseudo-classe hover.
Exercice 1
On considère les fichiers index.html et style.css suivants :
<!DOCTYPE html >
<html lang="fr">
<head>
<title>Animation basique</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>
Passe la souris par ici
</h1>
</body>
</html>
h1 {
text-align: left;
color: black;
}
h1:hover {
text-align: right;
color: red;
}
Créez les deux fichiers ci-dessus et ouvrez index.html dans Firefox. Il n'est pas nécessaire d'utiliser un serveur puisque tout le travail est fait par le navigateur.
Améliorer la transition
Vous remarquez que le titre passe de gauche à droite lorsqu'on passe la souris dessus et de droite à gauche sinon. Il devient également rouge lorsqu'il est survolé par la souris. Il n'est pas nécessaire d'être sur le texte, mais juste sur la ligne sur laquelle se trouve le texte.
Par contre, le changement est immédiat. Pour un changement plus doux, il faut utiliser l'attribut transition :
h1 {
text-align: left;
color: black;
transition: 1s;
}
h1:hover {
text-align: right;
color: red;
transition: 1s;
}
Exercice 2
Modifiez le fichier style.css comme ci-dessus et rechargez index.html dans Firefox.
Explications
Il faut une seconde pour que le texte passe au rouge et une autre pour qu'il revienne au noir. Le navigateur calcule les étapes intermédiaire, avec notamment, les couleurs entre le rouge et le noir. Par contre, pour la position (droite ou gauche), il n'y a pas de position intermédiaire, donc le changement se ferait encore instantanément. Pour faire un déplacement du texte, il faudrait utiliser d'autres attributs.
Exercice 3
Modifiez le fichier style.css pour que le fond du titre devienne noir et le texte blanc lorsqu'on passe la souris dessous. La transition doit se faire en 2s lorsqu'on passe la souris dessus et en 0,5 seconde lorsqu'on l'enlève. Pour changer la couleur du fond, il faut utiliser l'attribut background-color.