Attention, «animer» une page ne se réduit pas à faire bouger
physiquement certains de ses éléments sous l'œil du visiteur. Il
s'agit surtout de modifier son affichage en réponse à certains
évènements déclenchés par le
visiteur.
Toutes les propriétés de style d'un élément HTML sont scriptables, et donc susceptibles d'être commandées par un de ces évènements. Enfin..., si le navigateur est suffisamment conforme aux prescriptions du consortium W3C.
Toutes ces propriétés correspondent à des propriétés (au sens du javascript) d'un objet style (objet javascript) caractéristique de l'élément HTML. La première phase de toute animation consiste à trouver cet objet. Cela s'obtient à partir du script suivant :
function trouvestyle(idf) {
if (document.getElementById) {
return document.getElementById(idf).style;
} else if (document.all) {
return document.all[idf].style;
} else if (document.layers) {
return document.layers[idf];
} else { return null }
}
où idf est l'identificateur (ID) de l'élément.
La syntaxe d'appel de cette fonction est
var objet_style = trouvestyle(idf);Dans le script, on voit successivement trois tests,
null)
function newstyle(idf,prop,value) {
var objet_style= trouvestyle(idf);
if(objet_style)
eval( 'objet_style.' + prop + '="' + value+ '"' );
}
Le test if(objet_style) permet de ne rien faire si on n'a
pas trouvé l'objet-style (navigateurs trop vieux ou non conformes). Ensuite,
le script consiste simplement à bâtir une
chaîne de caractères
« objet_style.prop = "value" »
qu'on met en argument dans la fonction eval(). L'effet
est de la considérer comme une instruction javascript et de l'exécuter.
newstyle("aaa","visibility","hidden"),
objet_style.visibility = "hidden",
aaa".
A noter que notre script peut être appelé avec une valeur composée de
plusieurs mots, comme
newstyle("aaa","border","5px ridge green")
pour modifier une bordure via la syntaxe abrégée.
Enfin, on peut envisager des formes plus spécialisées de notre script, si on
ne compte agir que sur une propriété de style précise (par exemple
visibility comme dans
[1],
ou display comme dans
[2]), ou bien si
on veut agir sur plusieurs propriétés à la fois.
function hovermenu(idf) {
var stylem=trouvestyle(idf);
if(stylem) {
stylem.backgroundColor='#d96'
stylem.borderBottomColor='#cca';
stylem.borderLeftColor='#000';
stylem.borderTopColor='#000'; }
}
Notez bien que les valeurs à donner sont toujours des chaînes de
caractères (un nombre serait interprété comme une longueur en px)
Dans les lignes précédentes, nous avons implicitement supposé qu'on pouvait utiliser les mêmes noms pour désigner les «propriétés» CSS et les «propriétés» javascript correspondantes. Cela n'est vrai que pour des noms simples, sans tiret.
Dans le cas des noms composés
comme background-image, la règle est de
— mettre en majuscule la lettre après un tiret,
— et de supprimer le(s) tiret(s).
background-image devient
backgroundImage, et l'appel à notre script pour changer une
image de fond est
newstyle("aaa","backgroundImage","url(image_bis.jpg)")
Pour déplacer un calque, il suffit de modifier ses propriétés top ou
left.
C'était évidemment trop simple :
attention aux problèmes de compatibilité !
Il semble que ce soit fiable dans
le cas de calques définis juste au début du BODY (et c'est le
principe utilisé pour nos
bulles d'aides
fonctionnant avec NN4, NN6, IE5/6, Opera, Mozilla), mais les choses se
compliquent quand on cherche à donner un mouvement continu à des calques
plus loin dans l'arborescence de la page.
A titre d'exemple, cliquez ci-après pour
essayer de mettre en mouvement les images
sur la gauche et
sur la droite. A gauche (deux
oscillations horizontales), l'animation est
un jeu sur la propriété left d'un calque en
position: absolute et, à droite (deux oscillations
verticales),
un jeu sur la propriété top d'un calque en position:
relative. Il y a trop de navigateurs qui ne sauront pas exécuter
correctement les deux animations, bien que leur principes et leur codages soient vraiment
très proches l'un de l'autre (regardez le code).
margin-left dans l'image de droite. position : relative et l'image se
retrouve en haut de la page) On se heurte évidemment aux bugs des différents navigateurs, et on ne peut rien faire d'autre que d'essayer le script dans le plus de configurations possible. Notre conseil serait plutôt de s'abstenir de ce genre d'animations (en dehors des applications bien balisées commes les bulles d'aide). De toute façon, les possibilités offertes par ces techniques fait pâle figure à côté de ce qu'on peut faire avec les logiciels comme Flash ; en conséquence, si vous tenez vraiment à ce que ça bouge dans votre page, servez-vous de Flash.
Les jeux sur la visibilité des différents éléments d'une page constituent l'apport le plus important du DHTML (c.à.d. de la combinaison HTML4 + CSS + javascript) à l'animation des pages. On a deux grandes méthodes pour rendre visibles ou invisibles ces éléments.
visibility
de hidden à visible, ou vice-versa. L'un des
intérêts de cette méthode est son universalité : les scripts ainsi écrits
peuvent même fonctionner sur NN4 (heu... si celui-ci accepte d'afficher
le reste de la page :-), pourvu qu'on travaille sur des calques.
display, en la
faisant passer de none à block ou inline.
Nous avons montré comment appliquer cette technique à des menus
«glissants» [6].
Un inconvénient de cette technique, pour
cette mi-2002, est qu'elle ne fonctionne pas avec Opera (c.à.d. les scripts ne
marchent pas et les menus restent ouverts).
Quand on découvre ces effets, il est très amusant de changer à la volée le style d'un texte ou d'une boîte, mais cela sert finalement assez peu en dehors de variantes autour des effets de survol par la souris. Mais la seule possibilité de personnaliser l'effet hover (le survol des liens par la souris) peut être précieuse dans le raffinement de la charte graphique d'un site.
DIV avec des couleurs
et des bordures appropriées, le tout étant entassé dans un bloc
DIV général (il n'y a aucune table dans le codage).
On répond à ces deux objections en consentant à charger
deux images, deux seulement, pour tous les boutons, une pour l'état normal et
l'autre pour l'état survolé. Ces deux images servent d'images de fond dans
des blocs DIV et on écrit les différentes entrées par dessus.
Les deux images dans le menu ci-contre ci-contre pèsent moins de
2,5 ko en tout et on peut bâtir
autant d'entrées qu'on voudra par dessus. Et cette fois, les scripts
ont le bon goût de bien fonctionner sur Opera :-)
Nous expliquons en détail la manière de préparer ces menus dans un article séparé.