Interactivité avec CSS

L'emploi du CSS permet de réaliser une certaine interactivité de la page. Je veux dire par là que le visiteur peut sur survol / clic d'un élément modifier l'apparence de ce dernier

Cependant les effets via le CSS sont limités.
Pour plus d'interactivité il faut recourir au langage de programmation du web : JavaScript.
Je rappelle qu'il y a dans mon site également un tuto sur JavaScript. JavaScript & jQuery

L'image devient opaque et s'agrandit sur clic

Cliquez sur l'image et observez ...

Le code CSS & HTML correspondant

... img.effet1{ margin : auto; opacity : 0.1 ; width : 20%;} img.effet1:active {opacity : 1 ; width : 40%;} ... <img class ="effet1" src ='../images/burkini.jpg' /> ...

Commentaire du CSS

Une image affectée de la classe "effet1" est quasi transparente et minuscule.
Une image affectée de la classe "effet1" mais survolée devient opaque et sa taille double !

L'image change

Avec les pseudo-classes CSS :active, :hover on peut changer les valeurs des propriétés de style voire rajouter des propriétés CSS mais on ne peut pas changer les valeurs des attributs. Par exemple on ne peut pas changer la source d'une image (valeur de l'attribut src).
Donc l'astuce est que la source devienne une propriété CSS : propriété background-image d'une boite.

Survolez l'image et observez ...

Déshabillez moi !!!

Le code CSS & HTML correspondant

... #boite1 {width : 300px ; height : 400px; margin :auto; background-image :url(../images/burkini.jpg); background-size: cover;} #boite1:hover {background-image :url(../images/seins_nus.jpg);background-size: cover; box-shadow : 10px 10px 10px gray; } ... <div id ="boite1" /> <h3 style ="line-height : 300px ;" >Déshabillez moi !!!</h3> </div> ...

Commentaire du CSS

La boite identifiée "boite1" a pour "background" une image.
Si survol de cette boite (sélecteur : #boite1:hover) la valeur de la propriété background-image est changée ; un ombrage est ajouté.
Nous avons donc utilisé la pseudo classe :hover qui permet aussi de gérer un événement concernant un élément : le survol (par doigt ou la souris).

Lors du survol de l'image il faudrait que le texte de la balise H3 change : "Je suis déshabillée !"
Mais c'est impossible à faire en CSS : un événement concernant la boite identifiée boite1 ne peut modifier la balise H3.
Par contre c'est très facile à réaliser en JavaScript.

Visitez la page suivante pour avoir une présentation sommaire du langage JavaScript : Interactivité poussée avec JavaScript
Retour menu