Avec le DHTML, dynamiser le graphisme de vos pages Web
Combiner JavaScript, feuilles de style en cascade et le DOM, c'est ce que propose la technologie DHTML dans l'optique de réaliser des pages Web interactives et animées.
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
document.getElementById("moncalque").style.top)+10;
//modifier la taille
document.getElementById("nom_calque").style.width=parseInt
(document.getElementById("moncalque").style.width)-10;
//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) {
// Le navigateur utilisé supporte le DHTML
}