Médiaforma

Un premier pas vers l’interactivité en CSS

Print Friendly

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 http://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.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

Trackbacks for this post

Leave a Reply