Accueil
Mes tutoriels sur la programmation

Débuter en HTML & CSS - sommaire


Vous pouvez me contacter via Facebook (questions, critiques constructives) : page facebook relative à mon site

HTML & CSS : des pages interactives avec CSS puis JavaScript

Interactivité avec le 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 celui-ci.

Cependant les effets via le CSS sont limités.
Pour plus d'interactivité il faut recourir au langage de programmation du web : JavaScript; Voir plus loin dans ce chapitre.

Exemple 1: l'image devient opaque et s'agrandit sur clic

Cliquez sur l'image et observez ...
interactivité de la page grâce à CSS

Le code CSS & HTML correspondant

... img.effet1{ margin : auto; opacity : 0.1 ; width : 20%;} img.effet1:active {opacity : 1 ; width : 60%;} ... <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 !

Exemple 2 : 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 de la balise IMG).
Donc l'astuce est de créer une boite et de changer la valeur de sa propriété "background-image".

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.

Certaines propriétés CSS introduites par la version 3 permette de réaliser de véritables animations.
Je vous renvoie au tutoriel CSS - version 3 : lien vers ce tuto

Interactivité avec JavaScript

Attention il ne s'agit pas d'un tutoriel JavaScript mais simplement d'une petite démonstration par l'exemple de l'utilité de ce langage de programmation.

Dans cette deuxième partie du chapitre, l'interactivité est beaucoup plus poussée grâce à l'emploi du JavaScript.
JavaScript est un langage de programmation très utilisé par les développeur Web.
Le code est interprété par le navigateur. On dit qu'il est exécuté côté client (alors que PHP est exécuté côté serveur).

Exemple

Cliquez n'importe quelle des deux images, elles sont remplacées par des images plus dénudées.

Cliquez sur le bouton de commande légendé "réinitialiser la page" : la page retrouve son aspect initial (lors du chargement).

Le code CSS et HTML

... .exo2 {display : inline-block ; width : 40%; margin : 1% ; opacity : 0.5; vertical-align : top;} ... <br><img src ='../images/trikini.jpg' id ="trikini" class ="exo2" onclick = "fmodif1()" > <img src ='../images/burkini.jpg' id ="burkini" class ="exo2" onclick = "fmodif2()"> <button onClick ="freset()"> Réinitialiser la page</button>

Grâce à une règle de style CSS toutes les images de la page sont à demi transparentes.
Pour chaque image sur clic appel d'une fonction.
Si clic sur le bouton de commande légendé "réinitialiser ..." appel de la fonction freset.

Le script

var image1 = document.querySelector('#trikini'); 
var image2 = document.querySelector('#burkini') ; 
function fmodif1()
{
		image1.style.opacity = 1 ; 
		image1.src = '../images/jolie_fille.jpg' ; 
		
}
function  fmodif2()
{
		image2.src = '../images/seins_nus.jpg' ;
		image2.style.opacity = 1 ;
}
function freset()
	{ location.reload() }

Si vous ne comprenez rien au code ci-dessus, visitez dans le tuto sur Javascript & jQuery. Lien vers ce tutoriel

Si vous voulez créer des pages véritablement dynamiques (qui peuvent changer d'aspect mais aussi de contenu) il faut programmer en PHP.
PHP, langage du web que nous allons aborder sommairement dans les chapitres suivants.