Médiaforma

All posts tagged interactivité

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Le langage CSS peut être utilisé pour réagir à certains événements. Par exemple, une action peut être effectuée  au survol d’un élément HTML par le pointeur de la souris. Cette prouesse réside dans l’utilisation de la pseudo-classe :hover. Les pseudo-classes sont faciles à repérer : elles commencent toujours par le sélecteur :. A titre d’exemple, je vais vous montrer comment modifier le contour d’une image lorsqu’elle est survolée par la souris.

Le document utilisé est des plus simples. Il contient une balise <img> d’identifiant montagne pour afficher l’image montagne.jpg.

Le code CSS se trouve dans la feuille de styles style5.css. Il est également très simple. Le seul style qui y est défini concerne l’identifiant montagne (et donc l’image affichée dans le document). La pseudo-classe hover applique le code CSS à l’image lorsque le pointeur de la souris se trouve au-dessus de l’image. Ce code modifie la bordure de l’image. Les trois valeurs passées à la propriété border sont :

–          L’épaisseur de la bordure en pixels. Ici 4 pixels.

–          Le style de la bordure. Ici, le mot dashed provoquera l’apparition de tirets. Vous auriez également pu utiliser les valeurs dotted (pointillés), solid (trait plein), double (bordure double), groove (rainure), ridge (relief), inset (relief intérieur) ou outset (relief extérieur).

–          La troisième valeur indique la couleur. Le nom de la couleur peut être pioché dans les seize couleurs de base, dans les couleurs étendues (reportez-vous à la page https://www.mediaforma.com/couleurs-html-etendues/ pour prendre connaissance des couleurs utilisables) ou encore codé en RVB avec une valeur hexadécimale. Dans cet exemple, la bordure sera rouge.

Il ne reste plus qu’à afficher le résultat dans un navigateur avec une des commandes Launch du menu Exécution. Comme vous le voyez, cette technique fonctionne à la perfection : la bordure apparaît lorsque le pointeur de la souris survole l’image. Elle disparaît lorsque le pointeur de la souris est placé en dehors de l’image.

Si vous regardez d’un peu plus prêt, vous verrez qu’un décalage de l’image assez désagréable se produit lors de l’affichage et de la disparition des pointillés. Nous allons voir comment le supprimer dans la rubrique suivante.


Etape 4 – Ajout de l’interactivité

Dans cette étape, nous allons permettre à l’utilisateur de retourner les cartes en cliquant dessus.

Pour cela, nous allons ajouter la prise en compte de l’événement onclick dans la fonction affiche_image() :

img.onclick = function() {

document.getElementById(id).src = name;

setTimeout(function() {document.getElementById(id).src = ‘dos.jpg’; } , 1000);

}

Lorsqu’une image est cliquée, la fonction affectée à img.onclick est exécutée.

La première instruction affecte le contenu de l’attribut name à l’attribut src de l’image. Rappelez-vous, l’attribut name contient une chaîne du type 1.jpg, 2.jpg, etc. qui donne le nom de la figure représentée sur la carte. En affectant cette valeur à l’attribut source de la carte, la carte apparaît sur l’écran.

La deuxième instruction retourne la carte au bout d’une seconde. Pour cela, un timer est mis en place avec la fonction setTimeout(). Cette fonction admet deux paramètres :

  • Les instructions à exécuter ;
  • Le délai en millisecondes au bout duquel ces instructions sont exécutées.

Comme vous le voyez, l’instruction exécutée au bout de 1000 millisecondes, c’est-à-dire au bout d’une seconde, cache la carte qui a été cliquée en affichant son dos.