Débuter en programmation web - sommaire

Des pages interactives avec CSS & JS

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 ...

Interactivité avec CSS

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

Cliquez sur l'image et observez ...

Le code CSS & HTML correspondant

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

Via CSS on peut changer la valeur d'un propriété voire rajouter des propriétés mais on ne peut pas modifier la valeur d'un attribut pour une balise.
Par exemple on ne peut pas changer la source d'un élément IMG (valeur de l'attribut src). Donc l'astuce consiste à insérer une image dans une boite via la propriété CSS background-image.

Le rendu

Survolez l'image et observez ...

Le code CSS & HTML correspondant

La boite identifiée "boite1" a pour "background" une image.
Si survol de cette boite (le sélecteur : #boite1:hover) la valeur de la propriété background-image est changée.

Lors du survol de l'image il faudrait que le texte de la balise H3 change et devienne : "Je suis déshabillée !" Mais c'est impossible à faire en CSS ; on ne peut pas modifier le contenu d'un élément HTML via CSS. Par contre c'est possible en JavaScript.

Interactivité avec JavaScript (JS)

Reprenons le thème précédent avec cette fois avec une routine JS pour modifier non seulement la valeur de la propriété backgroud-image mais aussi le le contenu de l'élément H3.

Le rendu

Survolez l'image et observez ...

Le code

HTML : notez que chaque élément a un identifiant.

JavaScript :

Grâce à une fonction anonyme et sur survol de la boite (onmouseover) je modifie :
• la propriété de style de l'élément identifié "boite2"
• le contenu de l'élément identifié "titre"

Une autre fonction réinitialise sur fin du survol (on mouseout).

Notez qu'en JavaScript la propriété CSS background-image devient backgroudImage.
En effet en JavaScript le tiret milieu signifie une soustraction ! Donc en JavaScript les propriétés CSS contenant un tiret doivent être écrites selon la notation CamelCase : suppression du tiret et la lettre qui suit le tiret supprimé en majuscule.

Aller plus loin dans la modification du DOM

Une page web qui change d'aspect suite à un évènement (chargement, clic, survol) ? On dit que l'on modifie le DOM initial de cette page. En d'autres termes que l'on modifie son code HTML & CSS (mais seulement dans le navigateur du visiteur).

Grâce à JS on peut aller très loin dans les modifications du DOM initial :
• modifier les attributs d'un élément HTML
• créer de nouveaux éléments et les insérer dans la page
• supprimer des éléments

Lorsqu'un script modifie le DOM chargé, cette action s'effectue exclusivement dans la mémoire vive (RAM) du navigateur de l'utilisateur. Le code hébergé chez le serveur n'est pas modifié ! Et c'est heureux ...

Ci-dessous une exemple avec de grandes modifications du DOM initial.

Un patchwork coquin

À chaque seconde : une nouvelle image est insérée.
Cliquez sur le bouton de commmande pour mettre fin à l'insertion automatique d'images.

Explications sommaires

Ci-dessus j'ai inséré un document HTML dans un Iframe.

Ce document comprend une routine JS qui à chaque seconde :
• crée un nouvel élément de type IMG
• lui attribue une source (src) et une position absolue
• insère ce nouvel élément dans le patchwork selon la position absolue définie

Pour en savoir davantage sur la modification du DOM avec JS

Si vous êtes complètement ignorant en JavaScript, le code de la routine JS plus haut doit vous sembler obscur ...
Mon tuto JavaScript comprend deux chapitres sur la modification du DOM. Vous retrouvez entre autres le code correspondant au patchwork coquin.
JavaScript - modification du DOM pour une page interactive

Des pages web personnalisées

Si vous voulez que le contenu d'une page web soit liée à l'identité du visiteur ("espace perso") alors il faut programmer "côté serveur" avec par exemple, utilisation du couple PHP & MYSQL. Il faut en effet gérer une base de données avec un SGBD(Système de Gestion de Bases de Données) tel MYSQL ; un langage tel PHP est capable d'appeler des requêtes SQL.
Tutoriel PHP & MYSQL - chapitre introductif