SELFHTML: HTML dynamique / Les apports de Microsoft et de Netscape / Filtres dynamiques (Microsoft)

SELFHTML/Quickbar HTML dynamique Les apports de Microsoft et de Netscape

	Filtres dynamiques (Microsoft)
	Filtres dynamiques Modification dynamique simple des valeurs de filtres Fondus-enchaînés avec le filtre blendTrans Fondus-enchaînés avec le filtre revealTrans Fondus enchaînés

Filtres dynamiques

L'Explorer Internet MS supporte à partir de la version 4.x des mentions de style spéciales, appelées les filtres. À l'aide de tels filtres, des effets graphiques, tels qu'ils sont connus dans les programmes graphiques professionnels, sont possibles: les effets d'ombrage pour les textes ou aussi des définitions de transparence pour les graphiques qui sont affichés sur une page WWW, font partie du répertoire des mentions possibles. En tant que feuilles de style proprement dites, ces filtres sont statiques. À l'aide de scripts vous pouvez influencer les mentions concernant ces filtres. De plus il y a deux filtres spéciaux pour des effets de fondu ou divers effets d'enchaînement. Avec quelques connaissances en programmation et un tempérament d'esthète, presque tous les rêves secrets des concepteurs Web peuvent se réaliser grâce à eux: des graphiques qui apparaissent et disparaissent lentement comme par la main d'un fantôme, des enchaînements entre les éléments, des textes qui s'effacent etc.

L'accès du script à des filtres définis se fait par l'objet filtre en JScript/JavaScript. Les exemples ici ne peuvent pas traiter toutes les possibilités de l'objet filtre. Ils ne servent qu'à éclairer comment les filtres peuvent être modifiés de façon dynamique par un script.

Modification dynamique simple des valeurs de filtres

Exemple d'affichage: aperçu

Comme toutes les autres mentions de feuilles de style, vous pouvez également modifier de façon dynamique les mentions concernant les filtres.

Exemple:

<html>
<head>
</head>
<body>
<div id="textetremble" style="width:100%; font-size:72pt; color:#FF6666;
filter:Wave(freq=5, light=20, phase=50, strength=6);">légers parasites</div>
<script language="JavaScript">
<!--
function DynWave()
{
 if(document.all.textetremble.filters[0].freq > 30)
    document.all.textetremble.filters[0].freq = 5;
 document.all.textetremble.filters[0].freq += 1;
 if(document.all.textetremble.filters[0].phase > 100)
    document.all.textetremble.filters[0].phase = 0;
 document.all.textetremble.filters[0].phase += 10;
 if(document.all.textetremble.filters[0].strength > 10)
    document.all.textetremble.filters[0].strength = 1;
 document.all.textetremble.filters[0].strength += 1;
 window.setTimeout("DynWave()",100);
}
DynWave();
//-->
</script>
</body>
</html>

Explication:

Dans l'exemple le texte (légers parasites) faisant partie d'un passage <div> a été formaté à l'aide de mentions de feuilles de style. L'utilisation du filtre Wave() fait aussi partie du formatage. Ainsi l'effet du filtre est bien affiché, mais rien ne bouge encore. Dans un script situé en dessous du passage <div> ainsi défini, les mentions de ce filtre sont modifiées de façon dynamique. Étant donné qu'un effet sans fin, avec des valeurs et des combinaisons nouvelles à chaque fois est inséré, on obtient un effet de tremblement.

La fonction JavaScript dans l'exemple ci-dessus est définie sous le passage auquel elle se réfère. La raison en est que les instructions JavaScript sont exécutées immédiatement. Le passage <div> aux données duquel les instructions doivent accéder de façon dynamique doit à cet instant avoir déjà été lu et être connu du navigateur. C'est pourquoi le script se trouve après le passage <div>, faute de quoi des messages d'erreur pourraient apparaître.

Dans le passage script est tout d'abord définie une fonction nommée DynWave(). Cette fonction modifie les paramètres freq, phase et strength du filtre Wave, définies dans le repère <div>. À la fonction se rappelle elle-même. C'est ainsi qu'apparaît l'effet sans fin. L'appel a lieu avec un retardement de 100 millièmes de seconde. C'est important, étant donné que l'appel de la fonction par elle-même serait autrement "infiniment rapide ", et provoquerait un problème dans la mémoire de travail (les appels de fonctions par elles-mêmes ne sont pas à vrai dire tout à fait sans danger, étant donné que pour chaque appel de fonction, de la place doit être réservée en mémoire).

Étant donné qu'au début, la fonction doit au moins être appelée une fois (sinon, il ne se passerait rien), est noté à la fin du passage script - et en dehors de la fonction DynWave() - l'unique appel de fonction DynWave();.

Dans la fonction de l'exemple, vous pouvez reconnaître comment on accède aux filtres de façon dynamique. L'accès intervient à l'aide de l' objet all. La référence est la mention id="textetremble", qui est affectée dans le repère <div>. Avec document.all.textetremble, l'accès à cet élément HTML est rendu possible.

Deux particularités sont à observer avec les filtres:
Avec une expression telle que document.all.textetremble.filters[0].strength, vous accédez à la valeur qui avec la mention strength= est notée comme paramètre pour le filtre défini en premier de l'élément HTML. Étant donné que les filtres font partie des mentions de feuilles de style, devrait à vrai dire être noté document.all.textetremble.style.filters[0].strength. Ceci provoque cependant des messages d'erreur chez l'Explorer Internet MS. Laissez donc tomber la mention style du milieu.
Étant donné qu'un élément peut avoir plusieurs filtres, il vous faut mentionner exactement quel est le filtre que vous voulez adresser de façon dynamique. Dans l'exemple ci-dessus, c'est le premier filtre défini qui est adressé avec filters[0]. Au cas où un deuxième filtre serait encore défini dans le même repère <div>, vous pourriez l'adresser avec filters[1]. Donc le comptage commence à 0. Microsoft permet également d'autres possibilités de notation, pour l'exemple ci-dessus par exemple document.all.textetremble.filters["wave"].strength ou document.all.textetremble.filters.wave.strength.

Avec d'autres filtres, vous pouvez utiliser de la même façon le schéma décrit ici pour accéder aux valeurs d'un filtre - même avec les filtres qui sont avant tout intéressants en relation avec des graphiques.

Fondus-enchaînés avec le filtre blendTrans

Exemple d'affichage: aperçu (pour les graphiques)
Exemple d'affichage: aperçu (pour le texte)

Le filtre blendTrans est un filtre spécial qui n'est judicieux qu'en relation avec des scripts. Il permet de définir un fondu enchaîné d'un graphique sur un autre graphique ou d'un passage de texte sur un autre passage de texte. C'est ainsi que sont rendus possibles des effets comme des séances de diapositives professionnelles ou comme des images de télévision sur pages WWW.

Exemple (pour les graphiques):

<html>
<head>
<script language="JavaScript">
<!--
image1 = new Image();
image1.src = "image1.jpg";
image2 = new Image();
image2.src = "image2.jpg";
var image = 1;
function changeimage()
{
 if(image == 1)
 {
  image = 2;
  document.all.imagedyna.filters.blendTrans.Apply();
  document.all.imagedyna.src = image2.src;
  document.all.imagedyna.filters.blendTrans.Play();
 }
 else
 {
  image = 1;
  document.all.imagedyna.filters.blendTrans.Apply();
  document.all.imagedyna.src = image1.src;
  document.all.imagedyna.filters.blendTrans.Play();
 }
}
//-->
</script>
</head>
<body>
<img id="imagedyna" src="image1.jpg" style="cursor:hand; filter:blendTrans(Duration=4)"
onClick="changeimage()" width=200 height=100">
</body>
</html>

Explication:

L'exemple fait en sorte qu'en cliquant sur une image, celle-ci se transforme lentement en une autre image. Si on clique alors sur cette autre image, elle se transforme à son tour lentement en la première image.

Dans un premier temps est notée pour cela à la définition de l'image avec <img...> une mention spéciale de feuilles de style: le filtre blendTrans(...). Ce filtre attend un paramètre, à savoir la mention concernant Duration=. Avec elle, vous pouvez mentionner combien de temps doit durer le passage d'une image à l'autre. Dans l'exemple, on a mentionné 4 - qui signifie 4 secondes. Vous pouvez également mentionner des fractions de seconde jusqu'au millième, par exemple 2.450 (le signe décimal est un point !).

Avec cette mention, l'effet d'enchaîné n'est cependant que "référencé". Pour l'exécuter réellement, un script est nécessaire. Dans l'exemple ci-dessus, un passage JavaScript est défini dans l'entête de fichier. C'est là que les deux images concernées (image1 et image2) sont d'abord définies comme objets à l'aide de l'objet image images. La propriété src des objets images sont affectés aux fichiers image souhaités. Ce travail préalable avec l'objet image n'est à vrai dire pas absolument indispensable, mais il présente l'avantage que les deux images concernées sont déjà dans la mémoire de travail quand l'enchaînement commence.

Dans la fonction changeimage() se fait ensuite l'enchaînement proprement dit. Cette fonction est appelée quand l'utilisateur clique sur l'image. Pour cela est noté dans le repère <img> l' Event-Handler onClick=.

Dans la fonction changeimage() est d'abord appelée la méthode Apply() du filtre blendTrans. Cet appel est nécessaire pour identifier l'objet qui doit remplacer l'autre. Dans l'exemple, c'est le graphique adressé par l'objet all et le nom attribué imagedyna. Comme instruction suivante est assigné au graphique le nouveau graphique par lequel il doit être remplacé. Ce n'est qu'ensuite que toutes les conditions sont remplies pour commencer l'enchaînement proprement dit. Pour ce faire, la méthode Play() de l'objet filtre est utilisée.

La variable image et l'embranchement else de la fonction en exemple servent à assurer l'effet de changement. Grâce aux commandes décrites, l'enchaînement a lieu exactement une fois.

L'effet d'enchaînement n'est pas seulement possible pour les graphiques mais aussi pour le texte.

Exemple (pour le texte):

<html>
<head>
<script language="JavaScript">
<!--
var texte = 1;
function changetexte()
{
 if(texte == 1)
 {
  texte = 2;
  document.all.montexte.filters.blendTrans.Apply();
  document.all.montexte.innerText = "n'est pas digne du dynamique";
  document.all.montexte.filters.blendTrans.Play();
 }
 else
 {
  texte = 1;
  document.all.montexte.filters.blendTrans.Apply();
  document.all.montexte.innerText = "Celui qui ne respecte pas HTML";
  document.all.montexte.filters.blendTrans.Play();
 }
}
//-->
</script>
</head>
<body>
<div id="montexte" style="cursor:hand; width:400px; height:100px;
font-size:24pt; filter:blendTrans(Duration=0.5)"
onClick="changetexte()">
Celui qui ne respecte pas HTML
</div>
</body>
</html>

Explication:

Pour du texte, le filtre blendTrans peut être appliqué aux éléments HTML:
<body>...</body>
<div>...</div>
<span>...</span>
<input>
<button>
<textarea>...</textarea>
<marquee>...</marquee>
comme à tous les éléments de tableau. Pour les repères <div>...</div> et pour <span>...</span>, vous devez noter des mentions de feuilles de style relatives à la largeur et à la hauteur de l'élément, faute de quoi cela ne fonctionne pas

L'exemple ci-dessus est pour l'essentiel semblable à celui des graphiques, à la différence qu'ici est défini un enchaînement entre deux textes. Le premier texte est défini conformément aux règles dans le corps du fichier HTML avec <div>...</div>. La réalisation du passage entre les deux textes est semblable à celle pour les graphiques. Au lieu d'utiliser la propriété src (pour les graphiques) vous devez utiliser pour les textes la propriété innerText (comme dans l'exemple) ou innerHTML. Ces propriétés permettent l'échange dynamique du contenu de l'élément HTML adressé.

Fondus-enchaînés avec le filtre revealTrans

Exemple d'affichage: aperçu

Le filtre revealTrans est tout à fait similaire dans la manipulation que le filtre blendTrans. Alors que le filtre blendTrans ne permet toutefois qu'un simple enchaînement d'un contenu à un autre, le filtre revealTrans met tout un arsenal d'effets graphiques de fondus-enchaînés à disposition.

Exemple (pour le texte):

<html>
<head>
</head>
<body>
<div id="montexte" style="width:600px; height:100px;
font-size:24pt; filter:revealTrans(Duration=1,Transition=7)">
Celui qui ne respecte pas HTML
</div>
<script language="JavaScript">
<!--
 window.setTimeout("change()",2500);
 function change()
 {
  document.all.montexte.filters.revealTrans.Apply();
  document.all.montexte.innerText = "n'est pas digne du dynamique";
  document.all.montexte.filters.revealTrans.Play();
 }
//-->
</script>
</body>
</html>

Explication:

L'exemple fait en sorte que le texte Celui qui ne respecte pas HTML soit remplacé après 2,5 secondes par le texte n'est pas digne du dynamique - et cela de telle façon que le nouveau texte "recouvre" le premier texte affiché en venant de la droite.

À cet effet, le texte Celui qui ne respecte pas HTML est d'abord noté dans un passage<div>. Car le filtre revealTrans est applicable en relation avec du texte sur les éléments HTML suivants:
<body>...</body>
<div>...</div>
<span>...</span>
<input>
<button>
<textarea>...</textarea>
<marquee>...</marquee>
ainsi que sur tous les éléments de tableau. Pour <div>...</div> et pour <span>...</span>, vous devez noter des mentions de feuilles de style concernant la largeur et la hauteur de l'élément faute de quoi, cela ne fonctionne pas. Dans l'exemple ci-dessus, la largeur et la hauteur du passage <div>sont fixées avec width: et height:.

D'autre part est notée une mention de feuille de style spéciale: le filtre revealTrans(...). Ce filtre attend deux paramètres, à savoir la mention de Duration= et une mention de Transition=. Avec Duration=, vous pouvez mentionner combien de temps doit durer l'enchaînement du premier texte au second. Dans l'exemple est mentionné 0.5 - ce qui veut dire une demi-seconde. Vous pouvez également mentionner des fractions de seconde, jusqu'au millième de seconde, par exemple 2.450 (le signe décimal est un point!).

Pour Transition=, vous mentionnez la façon dont doit agir le filtre. Le tableau suivant donne les valeurs autorisées - vous trouverez des exemples systématiques sur l'effet des différents filtres dans l' exemple d'affichage:

`Transition=0`	effet de boite extérieur vers intérieur	`Transition=8`	effet de rayures de gauche à droite	`Transition=16`	effet d'ouverture de haut en bas
`Transition=1`	effet de boite intérieur vers extérieur	`Transition=9`	effet de rayures du haut vers le bas	`Transition=17`	effet d'enroulement haut/droite vers bas/gauche
`Transition=2`	effet de cercle extérieur vers intérieur	`Transition=10`	effet de rectangles de gauche à droite	`Transition=18`	effet d'enroulement bas/droite vers haut/gauche
`Transition=3`	effet de cercle intérieur vers extérieur	`Transition=11`	effet de rectangles du haut vers le bas	`Transition=19`	effet d'enroulement haut/gauche vers bas/droite
`Transition=4`	effet d'enroulement du bas vers le haut	`Transition=12`	effet d'émiettement dans toutes les directions	`Transition=20`	effet d'enroulement bas/gauche vers haut/droite
`Transition=5`	effet d'enroulement du haut vers le bas	`Transition=13`	effet d'enroulement des 2 côtés extérieur vers intérieur	`Transition=21`	effet de stores horizontal
`Transition=6`	effet d'enroulement de gauche à droite	`Transition=14`	effet d'enroulement des 2 côtés intérieur vers extérieur	`Transition=22`	effet de stores vertical
`Transition=7`	effet d'enroulement de droite à gauche	`Transition=15`	effet de fermeture de haut en bas	`Transition=23`	choix aléatoire d'un des 23 effets précédents

Le filtre revealTrans peut s'appliquer de la même façon pour les graphiques:

Exemple (pour les graphiques):

<html>
<head>
</head>
<body>
<img id="imagedyna" src="pluie.gif"
style="filter:revealTrans(Duration=4,Transition=12)" width=320 height=240>
<script language="JavaScript">
<!--
 window.setTimeout("change()",5000);
 function change()
 {
  document.all.imagedyna.filters.revealTrans.Apply();
  document.all.imagedyna.src = "soleil.gif";
  document.all.imagedyna.filters.revealTrans.Play();
 }
//-->
</script>
</body>
</html>

Explication:

L' exemple fait en sorte que dans un laps de temps de 5 secondes (5000 millièmes de seconde), l'image affichée "pluie.gif" soit dispersée et remplacée par l'image "soleil.gif". Ici, les mêmes règles sont à respecter que pour du texte. À la différence près que, pour des graphiques, le nouveau graphique désiré doit être affecté entre Apply() et Play() - et cela à la propriété src.

Fondus enchaînés

Exemple d'affichage: aperçu (texte)
Exemple d'affichage: aperçu (graphiques)

Vous pouvez aussi utiliser les deux filtres blendTrans() et revealTrans() pour faire apparaître ou disparaître des textes et des graphiques "comme s'ils sortaient du Néant". C'est possible en combinaison avec la mention de feuilles de style pour l' affichage ou non affichage avec réservation de place - (visibility).

Exemple (faire apparaître ou disparaître du texte):

<html>
<head>
</head>
<body>
<div id="textearrive" style="width:400px; height:100px; font-size:24pt;
font-weight:bold; color:#0000FF; visibility:hidden; filter:blendTrans(Duration=10)">
Ici le texte arrive
</div>
<script language="JavaScript">
<!--
  document.all.textearrive.filters.blendTrans.Apply();
  document.all.textearrive.style.visibility = "visible";
  document.all.textearrive.filters.blendTrans.Play();
//-->
</script>
<div id="texteva" style="width:400px; height:100px; font-size:24pt;
font-weight:bold; color:#0000FF; visibility:visible; filter:blendTrans(Duration=10)">
Ici le texte part
</div>
<script language="JavaScript">
<!--
  document.all.texteva.filters.blendTrans.Apply();
  document.all.texteva.style.visibility = "hidden";
  document.all.texteva.filters.blendTrans.Play();
//-->
</script>
</body>
</html>

Explication:

Dans l'exemple ci-dessus ont été définis deux passages <div> avec du texte. Ces deux passages reçoivent chacun un nom avec la mention id, de façon à ce que l'on puisse les adresser avec un script. L'un des passages reçoit le nom textearrive, l'autre le nom texteva. Les deux passages reçoivent aussi, à l'aide de la mention de feuilles de style visibility, une mention spécifiant s'ils doivent d'abord être montrés ou non. La mention visibility:hidden dans le premier des deux passages <div> fait en sorte que ce passage ne soit tout d'abord pas montré. En revanche figure dans le deuxième passage la mention de feuilles de style visibility:visible. Ainsi, le texte correspondant sera montré à l'affichage du fichier. Dans les deux passages <div> est en outre noté le filtre blendTrans.

En dessous de chaque passage <div> est noté un script qui exécute le filtre blendTrans correspondant. Cela fonctionne exactement comme pour les fondus-enchaînés avec le filtre blendTrans. La différence réside en réalité dans le fait qu'entre l'appel des méthodes Apply() et Play(), aucun autre texte n'est affecté au passage <div> concerné, mais au contraire une nouvelle valeur pour visibility. Le passage qui a d'abord reçu visibility:hidden devient visible dans le script avec l'instruction document.all.textearrive.style.visibility = "visible". Étant donné que le changement entre invisible et visible est incorporé dans le filtre blendTrans, le texte n'est pas immédiatement visible, mais ne le devient que par l'exécution du filtre blendTrans.
Il se passe la même chose avec le deuxième texte, mais dans le sens inverse.

Exemple (faire apparaître ou disparaître des graphiques):

<html>
<head>
</head>
<body>
<p><a id="allume" style="display:inline" href="javascript:apparition()">faire apparaître le graphique</a>
<a id="eteint" style="display:none" href="javascript:disparition()">faire disparaître le graphique</a></p>
<img id="image" src="graphique.jpg" style="visibility:hidden;
filter:revealTrans(Duration=4, Transition=1)" width=433 height=278>
<script language="JavaScript">
<!--
  function apparition()
  {
   document.all.image.filters.revealTrans.Transition = 1;
   document.all.image.filters.revealTrans.Apply();
   document.all.image.style.visibility = "visible";
   document.all.image.filters.revealTrans.Play();
   document.all.allume.style.display = "none";
   document.all.eteint.style.display = "inline";
  }
  function disparition()
  {
   document.all.image.filters.revealTrans.Transition = 0;
   document.all.image.filters.revealTrans.Apply();
   document.all.image.style.visibility = "hidden";
   document.all.image.filters.revealTrans.Play();
   document.all.allume.style.display = "inline";
   document.all.eteint.style.display = "none";
  }
//-->
</script>
</body>
</html>

Explication:

Cet exemple contient d'abord deux liens. Les deux liens appellent chacun une fonction JavaScript. L'un des liens appelle la fonction apparition() pour faire apparaître le graphique et l'autre lien la fonction disparition() pour faire disparaître ce même graphique. Les deux liens contiennent également des mentions de feuilles de style concernant l' affichage ou non affichage avec réservation de place - (visibility). Le premier lien est d'abord affiché, le deuxième non. Les mentions sont modifiées de façon dynamique dans les deux fonctions script apparition() et disparition(). Ainsi est rendu possible l'affichage du lienfaire apparaître le graphique quand le graphique n'est pas affiché et l'affichage du lien faire disparaître le graphique, quand le graphique est affiché.

Sous les liens est noté le graphique qui doit apparaître et disparaître. Par la mention de feuilles de style visibility:hidden l'affichage du graphique est empêché dans un premier temps. En outre le graphique reçoit une mention concernant le filtre revealTrans(). Si maintenant l'utilisateur clique sur le lien d'abord affiché faire apparaître le graphique, la fonction script apparition() est appelée. Cette fonction modifie, entre l'appel de Apply() et de Play() du filtre revealTrans(), l'affichage du graphique à faire apparaître sur: visible. Le filtre est exécuté, et le graphique apparaît avec le fondu-enchaîné prescrit (transition = 1). De plus, la fonction apparition() échange encore les attributs d'affichage des deux liens de façon à ce que le lien pour faire disparaître le graphique soit maintenant affiché.

La fonction disparition() fait la même chose mais dans le sens inverse. Là, la façon d'agir du filtre revealTrans est inversée à savoir par transition = 0.


après:	Feuilles de style JavaScript JSSS (Netscape)
avant:	Liaison de données (Microsoft)

SELFHTML/Quickbar HTML dynamique Les apports de Microsoft et de Netscape