Interactivité avec CSS

L'emploi du CSS permet de réaliser une certaine interactivité de la page.
Je veux dire par cette expression 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.

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%;} ... <p class ="remarque">Cliquez sur l'image et observez ... <img class ="effet1" src ='../images/burkini.jpg' /> ...

Commentaire du code

L'image est affectée de la classe "effet1".
Notez bien la syntaxe du sélecteur de la règle de style : img.effet1:active. Ce qui signifie :"si clic sur une image affectée de la classe "effet1". Emploi de la pseudo classe :active qui permet donc de gérer un événement sur le noeud.

L'image change

Avec les pseudo-classes CSS :active, :hover on peut changer les valeurs des propriétés CSS voire rajouter des propriétés 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 l'image 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; } ... <p class ="remarque">Survolez l'image et observez ... <div id ="boite1" /> <h3 style ="line-height : 300px ;" >Déshabillez moi !!!</h3> </div> ...

Commentaire du code

La boite identifiée "boite1" a pour fond une image.
Si survol de cette boite (sélecteur : #boite1:hover) l'image de fond est changée; la taille de la nouvelle image est ajustée à la boite ; un ombrage est ajouté.
Nous avons donc utilisé la pseudo classe :hover qui permet aussi de gérer un événement concernant le noeud : le survol (par doigt ou le pointeur de la souris).

Il y avait une autre solution : utiliser JavaScript.
Via un script, déclenché lors du survol du noeud, on peut modifier la valeur des attributs d'un noeud et en particulier l'attribut src d'une image.
Mais je n'en dis pas plus. Visitez mon tuto "JavaScript & jQuery".
Retour menu