Les styles en HTML et le JavaScript
(Internet Explorer de préférence)

Le JavaScript (cliquer ici pour découvrir le JavaScript) peut modifier les styles, ouvrant la voie à de multiples animations :

Un texte qui change de couleur quand la souris le survole J@C,
ou bien qui sursaute J@C,
ou qui grossit J@C
ou s'allonge démesurément : J@C,
ou dont le contenu change : J@C,
ou encore qui s'enfuit sans espoir de retour J@C
ou dont la couleur évolue avec le temps : J@C.
ou qui laisse apparaitre des commentaires : J@C
ou qui agit sur d'autres zones de texte J@C.
ou qui va se promener J@C
ou qui colore tout en rouge J@C

Un texte qui fait disparaître toute un paragraphe, J@C
et un autre qui le fait réapparaître.
ou qui en modifie l'alignement J@C
Une image qui se modifie quand on clique dessus :



Toutes ces animations utilisent JavaScript pour modifier quelques propriétés des divers objets HTML contenus dans la page (zones de texte délimitées par des balises SPAN, paragraphes délimités par des balises P, images...).
Les animations sont déclenchées par des évenements comme le chargement du document (BODY onload), le survol d'un objet (onmouseover et onmouseout), le clic de souris (onclick) ou le déplacement de la page (BODY onscroll).
Les propriés d'objets sont notamment : style.color ou style.fontSize pour les textes
style.background (couleur de fond)
style.visibility (visible ou hidden)
align (pour un paragraphe, right, left, center, justify)
style.top (distance verticale)
style.left (distance horizontale)
innerText et outerText (le texte compris entre les deux balises définissant l'objet)
innerHTML (ce qui est entre les deux balises HTML)
outerHTML (l'ensemble composé des deux balises et ce qu'elles entourent)
src (l'adresse du fichier image)
event.x ou event.y pour la position de l'évenement (par rapport à l'écran)
event.offsetX, event.offsetY, event.clientX et event.clientY pour la position de l'évenement.
Un exemple simple, le texte qui disparait quand la souris s'approche :
<SPAN onmouseover="javascript:this.style.visibility='hidden'">J@C</SPAN>
Le passage de la souris sur la zone de texte commande l'execution de la ligne JavaScript : this.style.visibility='hidden'.
this désigne l'objet dans lequel se trouve le JavaScript, objet dont on modifie la propriété style.visibility pour le cacher.

Pour tous les exemples, vous pouvez consulter le code de cette page en cliquant ici.


Voir un autre exemple sur la page : "Zoomer sur une image (HTML + JS + CSS)"