Le DHTML, c’est cette technique qui permet de déplacer ou modifier des éléments d’une page HTML de façon dynamique.
Le DHTML est souvent confondu avec Ajax pourtant si Ajax modifie le contenu d’un élément, le DHTML modifie la forme.
Comment ça marche le Dhtml? C’est assez simple, le DHTML modifie l’apparence CSS de divers éléments grâce à des des script javascript.
Voici un exemple:
Je désire déplacer une boite à gauche ou à droite en cliquant dessus.
pour cette fonction je vais jouer sur le style padding-left
je crée un fonction appelée ici “deplace()”
-
-
<script type="text/javascript">
-
function deplace(id)
-
{
-
elm = document.getElementById(id);
-
if (elm.style.paddingLeft==‘0px’ || elm.style.paddingLeft==0)
-
{
-
for (i=1; i<=100; i++){
-
setTimeout("elm.style.paddingLeft=’"+(i*3)+"px’;",(i*3))
-
}
-
} else {
-
for (i=1; i<=100; i++){
-
setTimeout("elm.style.paddingLeft=’"+(300-(i*3))+"px’;",(i*3))
-
}
-
}
-
}
-
</script>
ensuite on crée un élément html
-
<a href="#" onclick="deplace(’phototest’); return false"><img src="http://smashingcoding.com/wp-admin/Sans%20titre-3.png" id="phototest" alt="mapho" border="0" height="164" width="157" /></a>
Explication
elm est l’élément qui subira les modifications,
si le padding-left de l’élément vaut 0px ou 0 on lance la première boucle “for”
setTimeOut fonctionne comme ceci: setTimeout(”action a exécuter”, “dans combien de milliseconde”) ;
donc dans le cas présent la boucle va créer plusieurs appels à la fonction
-
-
setTimeout("elm.style.paddingLeft=’3px’;",3);
-
setTimeout("elm.style.paddingLeft=’6px’;",6);
-
setTimeout("elm.style.paddingLeft=’9px’;",9);
-
…
Ensuite, si le elm.style.paddingLeft n’est pas égal à zero, on lance la fonction inverse.
C’est simple non?
Ne serait-il pas judicieux d’orienter le lecteur vers les framework prototype et scriptaculous qui lui permettront de facillement manipuler de l’AJAX, des objets DOM et du DHTML et ce quelque soit le type de navigateur ?