Accueil > HTML > HTML – Les effets de transitions avec Microsoft Internet Explorer

HTML – Les effets de transitions avec Microsoft Internet Explorer

25/03/2002 cybwarrior Commenter Allez aux commentaires
  1. Le code
    1. Les évenements
    2. Les transitions

Le marché des navigateurs Web se partage principalement en deux : Netscape et Microsoft.
Chacune de ces deux marques a proposé de nouvelles innovations, parfois très interessantes.
Malheuresement, ces innovations sont rarement conformes au spécifications du W3C et à l’esprit de la portabilité.
Par exemple, l’élement <BLINK> de Netscape Navigator ne fonctionne pas avec Microsoft Internet Explorer.
Il en est de même avec <MARQUEE>, mais dans le sens inverse. Et on peut multiplier les exemples, il y en a beaucoup!

Les effets de transitions est un nouveau « concept » signée Microsoft (qui bien sur, ne
fonctionne pas avec Netscape !).
Cette innovation consiste à plus ou moins animer la phase de changement d’une page à une autre. Vous pouvez en avoir la démonstration en cliquant sur ce lien.

Le code

Pour utiliser un effet de transition, il faut utiliser l’élement <META> (voir Les méta-informations et le réferencement).
On utilisera alors l’attribut http-equiv pour déterminer le type d’évenement et l’attribut content pour
le type de transition.
Exemple :

<META http-equiv="Page-Enter" content="revealTransition(Duration=5,Transition=21)">
<!-- Lorsque l'on arrive sur cette page, on voit des barres horizontales
pendant 5 secondes -->

Les évenements

On distingue 4 types d’évenements : l’entrée sur une page, la sortie d’une page, l’entrée sur un site et la sortie d’un site. Chacun de ces évenements
est matérialisé par un « nom de code » :

  • Entrée sur une page : Page-Enter. Cette évenement se produit lorsque la page est chargée.
  • Sortie d’une page : Page-Exit. Se produit lorsque le visiteur quitte la page.
  • Entrée sur un site : Site-Enter. Se produit uniquement lors du chargement de la première page d’un site.
  • Sortie d’un site : Site-Exit. Se produit uniquement lorsque le visiteur appel une page située à l’exterieur du site.

Une fois l’évenement choisi, on doit le placer dans l’attribut http-equiv de la balise <META>

Les transitions

Une transition est configurable selon 2 paramétres : la durée et la transition.
La durée s’exprime en secondes et peut s’échelonner de 0.0 à 60.0 secondes.
Pour les transitions, il y en a 24 possibles, de 0 à 23. Les voici :

Les différents effets de transitions
Index Description Index Description
0 Un carré, de l’extérieur vers l’intérieur 1 Un carré, de l’intérieur vers l’exterieur
2 Un cercle, de l’exterieur vers l’intérieur 3 Un cercle, de l’intérieur vers l’exterieur
4 Effacement, de bas en haut 5 Effacement, de haut en bas
6 Effacement, de gauche à droite 7 Effacement, de droite à gauche
8 Volets verticaux 9 Volets horizontaux
10 Cases d’échiquier, sens horizontal 11 Cases d’échiquier, sens vertical
12 Dissolution aléatoire (neige) 13 Effacement horizontal, vers l’intérieur
14 Effacement horizontal, vers l’exterieur 15 Effacement vertical, vers l’interieur
16 Effacement vertical, vers l’exterieur 17 Effacement, du haut à droite, vers le bas à gauche
18 Effacement, du bas à droite, vers le haut à gauche 19 Effacement, du haut à gauche, vers le bas à droite
20 Effacement, du bas à gauche, vers le haut à droite 21 Rayures horizontales
22 Rayures verticales 23 Effet aléatoire (un parmi les 23 cités)

La transition est définit dans l’attribut content de la balise <META>. Voici la syntaxe de cet attribut :

revealTrans(Duration=TPS,Transition=Index)

ou

blendTrans(Duration=TPS)

Vous devez remplacer TPS par la durée de la transition en secondes, et Index par celui de la transition sélectionnée.

Vous remarquer que pour la 2ème syntaxe, seule la durée est paramétrable. En fait, blendTrans represente une transition
à part entiére. En cinéma, on appel ceci un fondu enchainé.

Categories: HTML Tags:
  1. Pas encore de commentaire
  1. Pas encore de trackbacks