QUELQUES EXEMPLES DE DYNAMIC HTML
Suite à une grande demande d'explications, je vous propose cette petite chronique supplémentaire sur le DHTML qui vous aidera à mieux comprendre et utiliser le nouveau DHTML...
Méthodes...Vous avez différents possibilités pour créer le DHTML sur du texte : soit vous employez du script, soit vous jouez sur le changement de style du texte.
Changement de couleur simple...
Une des premières façons, qui ne nécessitent aucun script est celle du changement de style du texte sélectionné... Pour ce faire, vous devez bien sûr introduire, dans l'en-tête de votre page, un définition des styles que vous allez employer : IE4.0 reconnaît cette définition de styles. Par exemple :
Ainsi, avec un style de départ (classe), on obtient donc trois couleurs (style(classe) de départ, avant le passage de la souris+onmouseover+onmouseout).
Si vous ne voulez pas de trois couleurs mais de deux, ne mettez pas de style de départ ! Dans l'exemple ci-dessous, le texte est dans la couleur normale au départ, ensuite avec la souris, en rouge et après la souris en jaune.
Vous pouvez placer la couleur que vous désirez par le code en notation hexadécimale, exemple pour le bleu foncé "#000080"> : vous remplacez donc le nom de la couleur (red, blue, black) par ce code...
Vous pouvez aussi affiner en demandant que le curseur se change en "main" par l'ajout dans le style (classe) de départ de la spécification "cursor:hand", précédé d'un point-virgule. Ainsi le style blueText sera ".blueText {color:Blue;cursor:hand}", comme ci-dessous.
Changement de couleur avec mouvement...
De la même manière, vous pouvez provoquer une mouvement, en choisissant simplement un style qui comporte une changement de l'attribut de la police, par exemple l'espacement, mais vous pouvez choisir tous les attributs possibles (employez à cet effet l'option "Feuille de style" de l'onglet "Spécialisés" de WebExpert.
Exemple avec un espacement plus important :
Voici le code :
Le style :
.redText {color:Red; letter-spacing:10px}Exemple avec un agrandissement du pas de la police :
Voci le code :
Le style :
.redText2 {color:Red; font-size: 44pt}
Avec cette façon de procéder, lorsque le pointeur de la souris se place sur la ligne (en-dehors du texte), l'effet se produit ! Avec les procédures expliquées dans la précédente chronique, ce n'est pas le cas puisqu'on ne change pas le style mais c'est un code qui fait appel à une fonction.
On peut réaliser le changement de couleur avec un petit script également :
Le script est le suivant :
.vText {color:#008000}
.bText {color:#800000}
et la ligne de code du texte :
L'avantage de cette procédure, c'est qu'on peut employer une partie de texte seulement, comme dans l'exemple suivant :
Cette solution requiert cependant un script pour chaque effet DHTML : vous pouvez employer la procédure expliquée dans la chronique précédente qui elle ne requiert qu'un seul script qui comprend la variable "ie4" et qui permet le même effet :
Voici le code pour rappel :
Et le script en question :
Je vous donne les deux procédures car il peut être intéressant d'employer l'une ou l'autre. On peut aussi conjuguer la procédure précédente avec un changement de style...
Voici le code avec le changement de style, plutôt que le changement de couleur seul : attention, les styles ne changent que la couleur mais ils peuvent faire plus...
Les styles employés ne changaient que la couleur mais on peut varier les effets avec d'autres attributs de style :
"Visibility" et "Display"...
Un autre effet DHTML intéressant est la visibilité (visibility) du texte et son apparition à l'écran (Display) : regardez l'exemple ci-dessous :
Visibility...
Cliquez ici pour faire apparaître ou disparaître le texte :
Voici un exemple de texte qui peut disparaître : l'espace du texte est toujours réservé mais le texte est invisible.
Texte qui se trouve directement situé après le code dans la page...
Display...
Cliquez ici pour faire apparaître ou disparaître le texte : Voici une exemple de texte qui peut apparaître. L'espace n'est pas réservé et sa présence est donc totalement invisible...La suite du texte va donc être repoussée sur l'écran pour permettre au texte qui va apparaître de venir s'intercaler... Texte qui se trouve directement situé après le code dans la page...
Vous constatez la différence entre les deux méthodes. Si vous pouvez ou voulez réserver de l'espace pour le texte qui doit apparaître, employez la première méthode. Par contre, si le texte doit être "inséré", employez la seconde.
Voici les codes :
Visibility :
Display :
Pour que le texte apparaisse en gras, j'ai employé "<B...>" mais vous pouvez employer les autres attributs comme "<P...>", <SPAN...>, <DIV> et leurs codes respectifs de fin de balise </B>, </P>, </SPAN> et </DIV>
Attention, ici il y a quelque chose de très important à comprendre et à connaître : chaque partie de texte doit avoir une identification précise et unique : dans notre exemple, le premier texte (visibility) possède l'identification "v" et l'autre (display) possède l'identification "d". Pour reproduire cet effet, vous devrez donc chaque fois donner une identifiation différente à tous vos codes. Ou alors, créer un script qui va automatiser cela mais c'est plus compliqué et ce n'est pas à la portée de tous! Par contre, changer l'identification (pour autant qu'elle soit indentique pour les deux parties) peut être fait facilement...
Vous pouvez donc varier tous les effets et obtenir ainsi des pages qui sont dynamiques tout en employant peu de ressources, d'où une très grande rapidité de chargement...
C'est le navigateur du visiteur, compatible DHTML, qui effectue le travail et cela n'exige donc aucun chargement d'applet etc. C'est donc beaucoup moins lourd...
D'autres effets viendront comme les filtres sur les images ou le texte...