Animer une page html

Créons notre premier fichier javascript : premier_script.js

1. Créer un nouveau fichier dans Notepad++ et sauvegarder le sous le nom premier_script.js

   La fonction document.getElementById() permet de rechercher dans le document un élément dont l'identifiant est passé en paramètre. Cette fonction renvoie une "référence", c'est à dire un lien vers l'élément. Pour chercher dans notre document une référence vers l'élément cercle nous utiliserons :
   
   var ref_cercle=document.getElementById('cercle');

   • document est la référence du document qui a lancé le script. Par exemple si le script est lancé dans une page html, document représente l'ensemble du contenu de la page.
   • 'cercle' entre les parenthèses est un texte alors que ref_cercle à gauche du signe égal est une variable que nous créons avec le mot clef var.
   • ref_cercle est la référence de l'objet cercle, il va nous permettre de travailler sur l'objet cercle.
     
     
2. Bien, maintenant que nous tenons le cercle passons à l'action :
   
   Tout d'abord nous allons utiliser une fonction qui va surveiller les événements qui arriveront sur l'objet cercle. Les événements sont par exemple un clic (click), le passage de la souris au dessus de l'objet (mouseover), la sortie de la souris de la surface de l'objet (mouseout).
   
   Pour surveiller les événements de type click sur l'objet cercle nous utiliserons la fonction addEventListener() associée à la référence ref_cercle
   
   ref_cercle.addEventListener('mouseover', XXX , true);
   
   Cela signifie que nous surveillons les événements de type mouseover sur l'objet référencé par ref_cercle.
   
   XXX sera la fonction que nous appliquerons sur l'objet. Par exemple la fonction :
   
   function(){ref_cercle.style.opacity="0";}
   
   Nous réglons ainsi l'opacité à 0, c'est à dire transparent !


ref_cercle.addEventListener('mouseover', function()
{
ref_cercle.style.opacity="0";
}, true);


3. Pour éviter que le cercle reste invisible il est judicieux de le faire réapparaître lorsque la souris sort de sa surface :
   
   ref_cercle.addEventListener('mouseout', function()
{
ref_cercle.style.opacity="1";
}, true);

   
   
4. Maintenant que votre fichier premier_script.js est complet il faut assembler toutes les briques du puzzle. Dans votre répertoire vous devez avoir deux fichiers : premier_script.js et premier_dessin.svg. Il faut y ajouter la bibliothèque svghelper.js (cliquer droit >> Enregistrer la cible sous...).
   
   

Votre répertoire est complet ? Valider cette partie