DHTML

DHTML (Dynamic HyperText Markup Language, qui n'est pas une norme), 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. Normal

Les technologies que le DHTML met en oeuvre sont, outre le HTML, nécessaire pour présenter le document :

·         Les feuilles de style (CSS), permettant de définir un style pour plusieurs objets et le positionnement de ceux-ci sur la page

·         Le modèle objet de document (DOM), proposant une hiérarchie d'objets, afin de faciliter leur manipulation

·         Le Javascript, langage de script essentiel pour définir des événements utilisateur

Couches

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" 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: Normal

·         La position par rapport au haut du navigateur

·         La position par rapport à la bordure gauche du navigateur

·         La largeur

·         La hauteur

·         Le Z-Index, c'est-à-dire le niveau de superposition de la balise

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 DIV, SPAN et LAYER

Les balises permettant de constituer des couches sont les balises LAYER, SPAN et DIV.

La première (LAYER) est une balise spécifique à Netscape Navigator, et dont le fonctionnement est très proche de celle énoncée ci-dessus, c'est-à-dire la superposition de transparents (layer signifie justement couche). Les balises DIV et SPAN sont plus génériques mais sont toutefois mieux supportées par Internet Explorer que Netscape Navigator

La syntaxe de la balise LAYER est la suivante:

<LAYER NAME="Nom de la couche" LEFT="Distance au bord gauche" TOP="Distance au haut">

    éléments HTML

</LAYER>

Ainsi, le positionnement de deux images superposées sous Netscape Navigator (version 4 ou supérieure) peut se faire de la manière suivante:

<LAYER NAME="IMG1" LEFT="20" TOP="30">

<IMG SRC="image.gif">

</LAYER>

<LAYER NAME="IMG2" LEFT="25" TOP="35">

<IMG SRC="image2.gif">

</LAYER>

Avec Internet Explorer (versions 4 et supérieures), le positionnement des éléments se fait selon le concept des CSS-P, au moyen des balises DIV et SPAN. Etant donné que le navigateur Internet Explorer 4 est apparu après Netscape Navigator 4, les possibilités "dynamiques" qu'il offre sont plus vaste que celles de Netscape, c'est-à-dire qu'il offre plus d'attributs au niveau de ses balises, pouvant être modifiées par l'intermédiaire d'un code écrit en JavaScript après chargement de la page (d'où la notion de HTML dynamique).

Avec les balises DIV et SPAN, le positionnement peut se faire de deux façons :

·         Le positionnement absolu se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left).

·         Le positionnement relatif se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans la balises DIV ou SPAN seront positionnés à la suite des éléments HTML après lesquels ils se trouvent.

Les balises DIV/SPAN peuvent utiliser la syntaxe suivante:

<DIV style="position: absolute; top: 99 px;left: 99 px; visibility : visible;z-index : 2;">

    éléments HTMLNormal

</DIV>Normal

ou mieux, utiliser une classe définie dans une définition de style.

Pour consulter le tableau des attributs de balises.

L’animation

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).

 Par exemple, pour changer la localisation d'un document HTML, il suffirait d'inscrire une commande du genre document.location=destination. On peut imaginer facilement une boîte liste présentant à l'utilisateur une série de destinations possibles. Voici un exemple très simple :

<FORM> Changeons d'endroit :

   <INPUT TYPE="button" VALUE="OK" onClick="document.location='http://www.info.iuta.u-bordeaux.fr' ">

</FORM>

Affichage de la page ou d'un autre exemple déjà cité.

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:

·         en écrivant un script pour chaque navigateur

·         en créant (si possible) 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

Exemples

Faire apparaître des éléments

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>

Menus dynamiques

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

Déplacer un élément

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...).