Javascript et Dynamic HTML

Définition

HTML est un langage statique de description de pages. En effet, l'aspect de la page est défini lors du chargement par le navigateur. En HTML standard, l'animation ne peut venir que de GIFs animées ou de plugs-in spécifiques. Le DHTML permet de personnaliser et d'animer des pages grâce aux fonctions dites Dynamiques des navigateurs.

Grossièrement DHTML peut être considéré comme l'alliance de différentes choses :

Origines

Le Dynamic HTML ou DHTML est né avant même le mot DHTML. Ce sont Netscape et Microsoft qui, les premiers, ont introduit la notion de pages dynamiques dans leurs navigateurs respectifs. Cette double origine est la cause de la plupart des soucis rencontrés à l'heure actuelle par le développeur souhaitant faire du HTML dynamique.

Les deux navigateurs possèdent leurs propres modèles d'objets, des syntaxes souvent différentes, des particularités et des modes d'interprétation des commandes qui leur sont souvent propres.

Le W3C consortium n'est malheureusement intervenu qu'après le début de la bataille et n'a finalement réussi à imposer que le modèle de feuilles de style en cascade : Cascading Style Sheet ou CSS. Le W3C a bien défini un modèle de document dit Document Object Model ou DOM reste à savoir si ce modèle pourra s'imposer dans la communauté mais aussi et surtout au niveau des deux grands fournisseurs de navigateurs.

Le fait est qu'à l'heure actuelle la réalisation de pages animées affichables par les deux navigateurs est beaucoup plus simple et rapide avec des outils tels que Macromedia Flash qu'avec DHTML !!

Techniques du DHTML

Nous ne reviendrons pas sur la définition des feuilles de style (cf. le cours html) mais plutôt sur l'utilisation de Javascript à des fins d'animation des pages Web.

Etape 1 : une feuille de style et 11 objets positionnés

Reprenons notre précédente page de style avec quelques modifications mineures. Le résultat n'est pas bien esthétique mais nous allons l'améliorer...

Exemple  

  • Définition de 3 styles nommés nom1, nom2 et nom3 pour écrire en fond de page (z-index=1) et à des endroits bien précis ainsi que 3 objets HTML  rattachés à ces styles

 .nom3 {
font-family: Futura Md BT;
font-size: 80px;
color: #0000FF;
position: absolute;
top: 300px;
left: 80px;
visibility: visible;
z-index: 1;
} 		<DIV ID = "ceci" CLASS = "nom1">Ceci est</DIV>

<DIV ID = "premiere" CLASS = "nom2">ma première</DIV>

<DIV ID = "feuille" CLASS = "nom3">Feuille de style</DIV>

  • Définition de 2 styles nommés rub1, et rub3 positionnés en haut de fenêtre et à gauche l'un sur l'autre (top=10px;left=45px)  mais s'écrivant sur les précédents (z-index=2) ainsi que 2 objets HTML (des liens) rattachés à ces styles

  • Définition de 2 styles nommés rub2, et rub4 positionnés en haut de fenêtre et à droite l'un sur l'autre (top=10px;left=320px)  mais s'écrivant sur les précédents (z-index=2) ainsi que 2 objets HTML (des liens) rattachés à ces styles

 .rub1,.rub3 {
font-family: Comic Sans MS;
font-size: 30px;
color: #FFFFFF;
position: absolute;
top: 10px;
left: 45px;
visibility: visible;
z-index: 2;
}

.rub2,.rub4 {
font-family: Comic Sans MS;
font-size: 30px;
color: #FFFFFF;
position: absolute;
top: 10px;
left: 320px;
visibility: visible;
z-index: 2;
}

<DIV ID = "tableaux" CLASS = "rub1">
<A HREF = "../cours_html/tableaux.html">Les tableaux</A><BR>
</DIV>

<DIV ID = "images" CLASS = "rub2">
<A HREF = "../cours_html/images.html">Les images</A><BR>
</DIV>

<DIV ID = "hyperliens" CLASS = "rub3">
<A HREF = "../cours_html/hyperliens.html">Les hyperliens</A><BR>
</DIV>

<DIV ID = "frames" CLASS = "rub4">
<A HREF = "../cours_html/frames.html">Les frames</A><BR>
</DIV>

  • Définition d'un style .texte positionné en milieu de page ainsi que de 4 objets HTML (texte1, texte2, texte3 et texte4) rattachés à ce style

 .texte {
text-align: center;
font-family: Comic Sans MS;
font-size: 22px;
color: #ff6633;
position: absolute;
top: 260px;
left: 80px;
width: 400px;
visibility: hidden;
z-index: 1;
} 		<DIV ID = "texte1" CLASS = "texte">
Une présentation des tableaux en HTML 4</DIV>

<DIV ID = "texte2" CLASS = "texte">
Tout ce que vous devez savoir sur les images</DIV>

<DIV ID = "texte3" CLASS = "texte">
Tout sur les hyperliens</DIV>

<DIV ID = "texte4" CLASS = "texte">
Comment faire des fenêtres dans les fenêtres</DIV>

Etape 2 : des objets qui se déplacent dans la page

Animons notre page en faisant descendre petit à petit nos liens pour qu'ils se positionnent à des endroits bien précis.

Exemple  

  • Définition de 4 fonctions glisserub1, glisserub2, glisserub3 et glisserub4 de déplacement de nos quatre objets HTML (tableaux, images, hyperliens et frames) de type liens

 function glisserub1(from, to) {
if (from < to) {
tableaux.top = (from += 2);
setTimeout('glisserub1(' + from + ',' + to +')', 100);
}
}

  • Mise en place d'un module de détection du navigateur et création des variables correspondantes pour chacun des objets

 var navi = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);

var tableaux = (navi) ? document.tableaux : document.all.tableaux.style;

var images = (navi) ? document.images : document.all.images.style;

var hyperliens = (navi) ? document.hyperliens : document.all.hyperliens.style;

var frames = (navi) ? document.frames : document.all.frames.style;

  • Appel des 4 fonction de glissement des liens

 glisserub1(0, 60);

glisserub2(0, 60);

glisserub3(0, 220);

glisserub4(0, 220);

Etape 3 : faire apparaître du texte sur passage de souris

Exemple  

  • Définition de 2 fonctions afficheobjet et cacheobjet qui jouent sur l'attribut de visibilité afin d'afficher et de cacher du texte

 function affichobjet(objet) {
objet.visibility = VISIBLE;
}

function cachobjet(objet) {
objet.visibility = HIDDEN;
}

 

  • Ajout d'évènements onMouseOver et onMouseOut dans les balises d'hyperliens de nos objets

   <DIV ID = "tableaux" CLASS = "rub1">
<A HREF = "../cours_html/tableaux.html" onMouseOver="affichobjet(texte1)"
onMouseOut="cachobjet(texte1)">Les tableaux</A><BR>
</DIV>

<DIV ID = "images" CLASS = "rub2">
<A HREF = "../cours_html/images.html" onMouseOver="affichobjet(texte2)"
onMouseOut="cachobjet(texte2)">Les images</A><BR>
</DIV>

<DIV ID = "hyperliens" CLASS = "rub3">
<A HREF = "../cours_html/hyperliens.html" onMouseOver="affichobjet(texte3)"
onMouseOut="cachobjet(texte3)">Les hyperliens</A><BR>
</DIV>

<DIV ID = "frames" CLASS = "rub4">
<A HREF = "../cours_html/frames.html" onMouseOver="affichobjet(texte4)"
onMouseOut="cachobjet(texte4)">Les frames</A><BR>
</DIV>