DHTML (Dynamic HyperText Markup Language), repose sur un usage combiné de la notion de feuille de style et de script exécuté par le navigateur (donc écrit en JavaScript !) qui permet de fournir des pages HTML plus interactives, c'est-à-dire dont le contenu peut être modifié grâce à des événements (mouvements de la souris, survol d'un objet par le curseur,...) après que la page en question ait été chargée.
DHTML met donc en oeuvre, outre le HTML, nécessaire pour présenter le document des notions déjà présentées :
Le DHTML est basé sur une fonctionnalité provenant de la norme 4.0 du HTML: les feuilles de style en cascade de positionnement, aussi appelée CSS-P (Cascading Style Sheets Positionning). Celles-ci permettent de définir des "couches" ou "calques" contenant des éléments et pouvant être positionnées sur l'écran. Il s'agit en réalité de balises HTML spéciales pouvant contenir elles-mêmes d'autres balises HTML, et dont les attributs sont entre-autres:
En effet, on appelle ces conteneurs HTML "couches" ou "calques" car il s'agit d'éléments HTML pouvant être superposés à l'écran comme des carrés de papier calque et pouvant être déplacés séparément (chaque calque est repéré par un identifiant unique que l'on définit comme attribut) dans la fenêtre du navigateur grâce à du Javascript. De plus, le z-index définit l'ordre de superposition des calques, c'est-à-dire quel calque se trouve au-dessus des autres.
Les balises permettant de constituer des couches sont les balises DIV et SPAN (une autre balise - LAYER - est disponible mais n'est reconnue que par Netscape et nous n'en traiterons pas).
Les balises DIV et SPAN permettent de délimiter une partie de la page (texte, image, tableau) sous la forme :
<style>
<!--
.st1 {position:relative;visibility : visible;cursor:hand}
-->
</style>
<DIV ID = "Element" CLASS = "st1">La zone d'intérêt</DIV>
de lui attribuer un nom (ID) qui permettra de la manipuler et un style (CLASS) qui permettra de préciser ses propriétés.
Ainsi devenu un objet, la zone délimitée est munie d'attribut que l'on pourra modifie à l'aide d'un script. Par exemple :
Element.visible = false;
Element.top = 100;
Le positionnement peut se faire de deux façons :
ou mieux, utiliser une classe définie dans une définition de style.
Pour consulter le tableau des attributs de balises.
L'animation des éléments présents sur une page Web se fait en modifiant leur propriété (position, hauteur, largeur, visibilité, z-index, ...) ou en utilisant leur méthodes (fonctions associées à un élément). Cela ne peut se faire qu'à l'aide d'un code Javascript, permettant de modifier les propriétés des éléments suite à des événements utilisateurs (clic sur la souris, déplacement de la souris, ...), et cela grâce à une structuration des éléments dans la page définie par le DOM (Document Object Model).
Le Document Object Model ayant été implémenté différemment dans les deux navigateurs concurrents (ie Netscape et Internet Explorer), la hiérarchie et les propriétés diffèrent quelque peu entre les deux browsers.
D'autre part, l'interprétation du code HTML est différente entre les deux navigateurs, ce qui fait qu'un travail sera nécessaire pour que l'effet soit visible sur les deux types de navigateur, soit en écrivant un script pour chaque navigateur, soit en essayant de créer un script fonctionnant sur les deux browsers
Selon que l'on utilise Internet Explorer ou Netscape, la façon d'accéder aux propriétés des éléments est différente, ainsi que les propriétés elles-mêmes (il s'agira donc dans un premier temps de déterminer par l'intermédiaire du script le type de navigateur utilisé, puis adapter la notation en fonction...).
Netscape permet d'accéder aux différents layers en utilisant la syntaxe suivante:
document.layers['nom'].document.layers['nom2'].attributNormal
ou
document.layers.nom.document.layers.nom2.attributNormal
Internet Explorer définit un objet appelé "all" contenant tous les éléments DIV. Ainsi, l'accès aux éléments se fait par la syntaxe suivante:
document.all.nom.attributNormal
Voici un petit aperçu des actions réalisables en DHTML et la façon de les effectuer sur les deux navigateurs:
|
Action |
Netscape Navigator |
Internet Explorer |
|
Modifier l'image de fond |
document.layers.nom.backgroundNormal |
document.all.nom.style.backgroundImage |
|
Modifier la couleur du fond |
document.layers.nom.bgColor |
document.all.nom.style.backgroundColor |
|
Modifier le clipping |
document.layers.nom.clip |
document.all.nom.style.clip |
|
Modifier le contenu |
document.layers.nom.open(); document.layers.nom.writeln(); |
document.all.nom.innerHTML |
|
Modifier la distance à gauche |
document.layers.nom.left |
document.all.nom.style.left |
|
Accéder au nom |
objet.name |
objet.id objet.name |
|
Modifier la visibilité |
document.layers.nom.visibility |
document.all.nom.style.visibility |
|
Modifier la distance au haut |
document.layers.nom.top |
document.all.nom.style.top |
|
Modifier le z-index |
document.layers.nom.zIndex |
document.all.nom.style.zIndex |
Une utilisation importante de l'animation permise par DHTML est la possible de faire apparaître ou disparaître certains éléments en fonction des actions de l'utilisateur, par exemple en fonction des déplacements de la souris.
Un exemple simple est décrit par le code ci-dessous :
<head>
<STYLE>
.ST1 { font-family: Blackadder ITC; color: #008000; font-size: 16 pt; font-style:italic ;visibility = hidden}
.ST2 { font-size: 15 pt; color: #FF00FF; visibility = hidden }
</STYLE>
<title>Page d'accueil</title>
<script language="JavaScript">
<!--
/* Afficher l'objet */
function affichobjet(objet) {
objet.visibility = VISIBLE;
}
/* Cacher l'objet */
function cachobjet(objet) {
objet.visibility = HIDDEN;
}
//-->
</script>
<Title> Test </Title>
</head>
<body>
<H1>Comment faire apparaître des éléments</H1>
<DIV ID = "Element" CLASS = "ST1" onMouseOver = "affichobjet(Bj)" onMouseOut = "cachobjet(Bj)">L'élément affiché<BR>
</DIV>
<DIV ID = "Bj" CLASS = "ST2" >Celui qui apparaît</DIV>
<script language="JavaScript" >
var navi = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);
var HIDDEN = (navi) ? 'hide' : 'hidden';
var VISIBLE = (navi) ? 'show' : 'visible';
var Bj = (navi)? document.Bj : document.all.Bj.style;
var Element = (navi)? document.Element : document.all.Element.style;
affichobjet(Element);
</script>
</body>
Un exemple très répandu d'utilisation de ce genre de techniques DHTML est la création de menus déroulants très simples. Cet exemple est particulièrement simplifié. Il utilise les fonctions suivantes (code fourni par Macromedia Dreamweaver) qui, comme l'indique le code source de la page, sont contenues dans le fichier echange.js :
function findObj(n, d)
{
var p,i,x;
if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
}
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n);
return x;
}
function showHideLayers()
{
var i,p,v,obj,args=showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
if ((obj=MM_findObj(args[i]))!=null)
{
v=args[i+2];
if (obj.style)
{
obj=obj.style;
v=(v=='show')?'visible':(v='hide')?'hidden':v;
}
obj.visibility=v;
}
}
et que l'on appelle dans la page par une ligne du type
onMouseOver="showHideLayers('menu1','','show','menu2','','hide','menu3','','hide')"
Une technique semblable est utilisée pour créer les menus figurant en haut de ces pages. Naturellement la mise en oeuvre est alors nettement plus complexe (nombre d'éléments à afficher, permanence tant que l'élément est nécessaire, sélection et activation de l'élément de menu).
On trouvera sur le Web de très nombreux autres exemples dont on pourra s'inspirer, par exemple à l'adresse www.dynamicdrive.com
Le script qui suit permet de déplacer un élément en le sélectionnant à l’aide de la souris.
<style>
<!--
.drag, H1.drag{position:relative;cursor:hand}
-->
</style>
<script language="JavaScript1.2">
<!--
/* Drag and Drop Script-© Dynamic Drive (www.dynamicdrive.com) */
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
Utilisation
<html>
<head>
<!--drag engine code installed here-->
</head>
<body>
<img src="test.gif" class="drag"><br>
<img src="test2.gif" class="drag"><br>
<h1 class="drag"><b>"Hi there</b></h1>
</body>
</html>
Un petit exemple d'utilisation de ce code est accessible. On pourra sans difficulté trouver des utilisations plus intéressantes de ce type de possibilités (jeux, exercices, création d'un caddie virtuel...).