TUTORIEL/PRATIQUE
31/03/2008
Avec le DHTML, dynamiser le graphisme de vos pages Web
En DHTML, chaque élément HTML (tableaux, liens, etc.) est considéré comme un objet. Les différentes technologies qu'il propose vont permettre de manipuler ces objets, et ainsi de créer des pages Web interactives et animées. Pour effectuer cette manipulation, il faut placer les objets dans des calques (ou layer). Il est indispensable d'identifier chacun d'eux à l'aide de l'attribut id. Les CSS sont utilisées pour mettre en forme les objets et les calques. L'attribut style permet de décrire la présentation des éléments directement dans la page. Quant à l'attribut classe, il est exploité pour mettre un lien vers les classes regroupées dans une autre page (pour une meilleure présentation du code).
Le JavaScript est ensuite utilisé pour manipuler ces calques, et donc à travers eux, les objets. La manipulation des calques s'effectue grâce à la fonction document.getElementById().
Dans le code ci-dessous, la fonction cache() rend le calque invisible, ce qui a pour effet, dans notre exemple, de masquer le tableau contenu dans le calque. A l'inverse, la fonction montre() rend le calque visible. <html> <head> <script language="JavaScript"> <!-- function cache() { document.getElementById("nom_calque").style.visibility="hidden"; } function montre() { document.getElementById("nom_calque").style.visibility="visible"; } //--> </script> </head> <body> <div id="nom_calque" classe="nom_classe"> //calque défini avec <div> <table id="nom_tableau"> //objets HTML, exemple avec un tableau <tr> <td>case 1</td> <td>case 2</td> </tr> </table> </div> <a href="javascript:cache()">cacher</a> //lien appelant la fonction cache() <a href="javascript:montre()">montrer</a> //lien appelant la fonction montre() </body> </html> En JavaScript, il existe une quantité d'attributs pour agir sur les calques. D'autres exemples : //déplacer à gauche document.getElementById("nom_calque").style.left=10; //déplacer verticalement document.getElementById("nom_calque").style.top=parseInt //modifier la taille document.getElementById("nom_calque").style.width=parseInt //changer la couleur de fond document.getElementById("nom_calque").style.backgroundColor="yellow"; //changer la couleur du texte document.getElementById("nom_calque").style.color="green"; Attention, le DHTML ne fonctionne que sur Netscape et IE 4 ou plus. Il est conseillé d'effectuer un test en début de code pour vérifier le navigateur utilisé : if (document.getElementById) { }
|
Par Thomas Thelliez, (RocketBootstrapper.com) Lire
Par Thomas Arnaud, (Nudge) Lire