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

Pour plus d'interactivité il faut utiliser le langage de programmation JavaScript.

Thématique : dans une page une partie de l'article rédactionnel est masqué par défaut, seul le premier paragraphe ("l'accroche") apparait. Mais en cliquant sur un lien la partie masquée doit s'afficher.
Je vous présente successivement le code HTML, CSS et JavaScript.

Le code HTML

... <body> <h4>Plus de 1500 emplois pour les batteries de Renault à Douai bientôt annoncés, déception à Dunkerque</h4> <p id ="debut">"C'est très bien avancé et l’annonce devrait intervenir prochainement", indique une source proche du dossier, ... <p><a href ="#" onclick = "afficherComplet()">Lire la suite de l'article </a> <div id ="complet"> <h5>2 000 à 1 500 emplois</h5> <p>Selon le quotidien national "Deux mille emplois y seront créés d’ici à 2025, lorsque le site aura atteint toutes ses capacités. L’État, la région et l’agglomération ... </div> ...

La boite DIV est identifiée "complet".

Si clic sur la balise A : appel d'une fonction JS.

Le code CSS

	div#complet{display : none; }

Par défaut la boite identifiée "complet" est masquée.

Le script

	function afficherComplet()
		{
		document.getElementById('complet').style.display ='block';
		}

La fonction démasque l'élément identifié "complet".

Le rendu

Testez le code !

Remarque

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

Lien vers ce tuto JavaScript

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