Valid CSS!

Le DHTML Suivez le lien Valid HTML 4.01!



On peut le voir simplement comme un mélange d'HTML et de Javascript.

  1. Les objets qui bougent

    Vous pouvez voir des essais sur mon index, dans la barre de menu à droite, ma présentation ou dans le fichier "répertoire" de mon monde : ils marchent au moins avec N6.1, Mozilla et IE 5.5.

    Dans mon index, j'ai mis 30 étoiles dans des div à positionnement absolu (éléments de base du DHTML) que je fixe une à une sur la dernière position de la souris. J'ai rajouté la variable delta pour ne pas toujours effacer la dernière étoile mise, mais une autre, ceci permet d'étaler un peu plus la queue avec une densité moins importante à la fin. J'ai du résoudre un autre problème : avec Netscape, je dois décaler l'image afin qu'elle ne soit pas sous le curseur à la place du lien où on aimerait cliquer! Vous pouvez encore augmenter le nombre d'étoiles. La théorie pour savoir quelles étoiles vont rester doit reposer sur la décomposition des entiers en nombres premiers.

    Dans ma présentation, j'ai rajouté une barre de défilement dont je parle dans le chapitre javascript.

  2. Attention aux boucles : setInterval

    Quand on fait bouger un objet, le plus simple est de faire une procédure qui s'appelle elle-même, mais ceci, à chaque appel, rajoute sur la pile une adresse de retour. Cet appel se fera jusqu'à ce que la pile soit pleine. A ce moment, l'explorateur générera une erreur ou se plantera. Pour ceci, je vous propose la fonction setInterval que j'ai utilisée dans les fichiers précédemment cités : setInterval est une fonction qui appelle régulièrement une autre fonction.

  3. Les sous-menus

    Dans la frame ci contre, j'ai fait afficher des commentaires sous les liens quand la souris passe dessus avec des div (ou claques) au positionnement : position: absolute que je cache ou montre avec les fonctions onmouseover="montre(index)" onmouseout="cache(index)" à l'intérieur de la balise a, avec IE5, on pourrait les mettre dans les td du tableau et ainsi définir l'action pour toute la case, mais ce n'est plus du HTML (merci M$ de vouloir détruire ce qui n'est pas à toi!).

    Le principal problème est le positionnement : comment savoir la position de notre zone sélectionnée? Pour ma part, j'avais forcé la hauteur des cellules à 45 (enfin un peu plus) en mettant une image de 45 de haut par ligne. Malgré ceci, je n'avais pas ma hauteur de 45 par ligne et elle était même différente pour Netscape 4.7 et IE5! On peut tout aussi bien trouver la place de l'affichage en fonction de la position de la souris, sa place dépendra du point d'entrée dans la zone sélectionnée pour le lien, comme j'ai dans le fichier de présentation La Taillerie. Depuis, j'ai remarqué que les div à positionnement absolu dont les coordonnées ne sont pas imposées se placent à la suite de la dernière ligne affichée par le fichier (dans l'ordre chrnologique de la lecture du fichier). J'ai donc mis mes commentaires juste après les cases qu'ils commentent.

    Dans la frame ci contre, les messages s'effacent quand on sort de la zone sélectionnée. Ceci ne permet pas de faire un sous-menu ce qui est d'autant plus volontaire que le commentaire cache l'item suivant du menu! Pour gérer ainsi des sous menu, il faut enlever le onmouseout="cache(index)" et effacer les autres sous menus éventuellement affichés avant d'afficher le nouveau. Pour ces deux caractéristiques, regardez le fichier tracé de fonction qui affiche des commentaires en fin de page. Un sous menu peut être un tableau, comme les miens, mais ils peuvent aussi être un texte quelconque, pour mériter le nom de sous menu, ils doivent seulement proposer des options plus fines que le menu.

    Sous verez une évolution sur ma page dédiée rein qu'aux menus.