SELFHTML/Aides à la navigation HTML dynamique Les différents modèles DHTML| SELFHTML/Aides à la navigation HTML dynamique Les différents modèles DHTML |
Généralités sur les filtres dynamiquesL'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.
La technique des filtres de Microsoft n'est cependant jamais devenue un standard et on peut se poser la question si elle en fera jamais partie.
  |
Modification dynamique simple des valeurs de filtresPar une modification minutée des propriétés de feuilles de style des filtres, vous pouvez obtenir des effets intéressants.
<html><head><title>Test</title>
</head><body>
<div id="texte_tremblant" style="width:100%; font-size:72pt; font-weight:bold; color:#FF6666;
filter:Wave(freq=5, light=0, phase=80, strength=1);">légers parasites</div>
<script language="JScript" type="text/jscript">
<!--
function DynWave() {
if(document.all.texte_tremblant.filters[0].freq > 30)
document.all.texte_tremblant.filters[0].freq = 5;
document.all.texte_tremblant.filters[0].freq += 1;
if(document.all.texte_tremblant.filters[0].phase > 100)
document.all.texte_tremblant.filters[0].phase = 0;
document.all.texte_tremblant.filters[0].phase += 10;
if(document.all.texte_tremblant.filters[0].strength > 10)
document.all.texte_tremblant.filters[0].strength = 1;
document.all.texte_tremblant.filters[0].strength += 1;
window.setTimeout("DynWave()",100);
}
DynWave();
//-->
</script>
</body>
</html>
|
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 Filters 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éfinis dans le repère <div>. À fin 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="texte_tremblant", qui est affectée dans le repère <div> Avec document.all.texte_tremblant, 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.texte_tremblant.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.texte_tremblant.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.texte_tremblant.filters["wave"].strength ou document.all.texte_tremblant.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 blendTransLe 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.
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!--
image1 = new Image();
image1.src = "madrid1.jpg";
image2 = new Image();
image2.src = "madrid2.jpg";
var image = 1;
function changement_image() {
if (image == 1) {
image = 2;
document.all.Madrid.filters.blendTrans.Apply();
document.all.Madrid.src = image2.src;
document.all.Madrid.filters.blendTrans.Play();
}
else {
image = 1;
document.all.Madrid.filters.blendTrans.Apply();
document.all.Madrid.src = image1.src;
document.all.Madrid.filters.blendTrans.Play();
}
}
//-->
</script>
</head><body>
<p>Cliquez sur l'imge quand elle est affichée complètement.</p>
<img id="Madrid" src="madrid1.jpg" style="cursor:hand; filter:blendTrans(Duration=4, Transition=16)" onClick="changement_image()" width="433" height="278" border="0" alt="c'est Madrid">
</body>
</html>
|
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 image 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 changement_image() 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> le gestionnaire d'événement onClick=.
Dans la fonction changement_image() 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é Madrid. 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.
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!--
var texte_normal = "Celui qui ne respecte pas HTML";
var autre_texte = "n'est pas digne du dynamique";
var Text = 1;
function changement() {
if (Text == 1) {
Text = 2;
document.all.mon_texte.filters.blendTrans.Apply();
document.all.mon_texte.innerText = autre_texte;
document.all.mon_texte.filters.blendTrans.Play();
}
else {
Text = 1;
document.all.mon_texte.filters.blendTrans.Apply();
document.all.mon_texte.innerText = texte_normal;
document.all.mon_texte.filters.blendTrans.Play();
}
}
//-->
</script>
</head><body>
<p>Cliquez sur le texte qui suit:</p>
<div id="mon_texte" style="cursor:hand; font-size:32pt; color:red; width:600; height:200; filter:blendTrans(Duration=0.5)" onClick="changement()">
Celui qui ne respecte pas HTML</div>
</body>
</html>
|
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 revealTransLe 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.
<html><head><title>Test</title>
</head><body>
<img id="image_dyna" src="pluie.gif"
style="filter:revealTrans(Duration=2,Transition=12)" width="150"
height="145" alt="soleil?">
<script language="JScript" type="text/jscript">
<!--
window.setTimeout("changement()",5000);
function changement()
{
document.all.image_dyna.filters.revealTrans.Apply();
document.all.image_dyna.src = "soleil.gif";
document.all.image_dyna.filters.revealTrans.Play();
}
//-->
</script>
</body></html>
|
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".
<html><head><title>Test</title>
</head><body>
<div id="mon_texte" style="width:600px; height:100px; font-size:24pt; filter:revealTrans(Duration=1,Transition=7)">
Celui qui ne respecte pas HTML
</div>
<script language="JScript" type="text/jscript">
<!--
window.setTimeout("changement()",2500);
function changement()
{
document.all.mon_texte.filters.revealTrans.Apply();
document.all.mon_texte.innerText = "n'est pas digne du dynamique";
document.all.mon_texte.filters.revealTrans.Play();
}
//-->
</script>
</body></html>
|
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.
Exemple d'affichage: aperçu ( 24 possibilités pour les texte et le graphique)
|
|
|
Fondus enchaînésVous 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 visibility (Affichage ou non affichage avec réservation de place).
<html><head><title>Test</title> </head><body> <div id="texte_arrive" style="width:400px; height:100px; font-size:24pt; font-weight:bold; color:#0000FF; visibility:hidden; filter:blendTrans(Duration=4)"> Ici le texte arrive </div> <script language="JScript" type="text/jscript"> <!-- document.all.texte_arrive.filters.blendTrans.Apply(); document.all.texte_arrive.style.visibility = "visible"; document.all.texte_arrive.filters.blendTrans.Play(); //--> </script> <div id="texte_va" style="width:400px; height:100px; font-size:24pt; font-weight:bold; color:#0000FF; visibility:visible; filter:blendTrans(Duration=4)"> Ici le texte part </div> <script language="JScript" type="text/jscript"> <!-- document.all.texte_va.filters.blendTrans.Apply(); document.all.texte_va.style.visibility = "hidden"; document.all.texte_va.filters.blendTrans.Play(); //--> </script> </body></html> |
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 texte_arrive, l'autre le nom texte_va. 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.texte_arrive.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.
<html><head><title>Test</title>
</head><body>
<p><a id="allume" style="display:inline" href="javascript:apparition()">faire apparaître le graphique</a><br>
<a id="eteint" style="display:none" href="javascript:disparition()">faire disparaître le graphique</a></p>
<img id="image" src="madrid1.jpg" style="visibility:hidden; filter:revealTrans(Duration=4, Transition=1)" width="433" height="278" alt="Madrid">
<script language="JScript" type="text/jscript">
<!--
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>
|
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' visibility (Affichage ou non affichage avec réservation de place). 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 lien faire 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.
|
|
Fondus enchaînés de pages WebEnfin, la cerise sur le gâteau: Microsoft a encore pensé à interpréter les deux filtres blendTrans et
revealTrans en relation avec les Mentions Meta concernant le contenu. De cette façon, le fondu enchaîné entre pages Web est rendu possible.
<html><head><title>Test</title> <meta http-equiv="Page-Exit" content="RevealTrans(Duration=3,Transition=12)"> </head><body bgcolor="#000000" text="#FFFFFF" link="#FFFF66" vlink="#FFFF66" alink="#FFFFFF"> <h1>Voici la page 1</h1> <p><img src="madrid1.jpg" width="433" height="278" border="0" alt="une image"></p> <p><a href="transition2.htm">et un lien à la page 2</a></p> </body></html> |
<html><head><title>Test</title> <meta http-equiv="Page-Enter" content="RevealTrans(Duration=3,Transition=12)"> <meta http-equiv="Page-Exit" content="RevealTrans(Duration=3,Transition=12)"> </head><body bgcolor="#000000" text="#FFFFFF" link="#FFFF66" vlink="#FFFF66" alink="#FFFFFF"> <h1>Et voici la page 2</h1> <p>Elle est un tout petit peu différente mais pas de beaucoup.</p> <p><img src="madrid2.jpg" width="433" height="278" border="0" alt="ein Bild"></p> <p><a href="transition1.htm">et ceci est un lien pour retourner à la page 1</a></p> </body></html> |
Avec <meta http-equiv="Page-Exit"... vous précisez un filtre qui est appliqué lorsque la page est quittée, et avec <meta http-equiv="Page-Enter"... un filtre qui est appliqué lorsque la page est chargée. Pour content= notez RevealTrans ou bien BlendTrans suivi entre parenthèses des mentions désirées pour Duration= et - pour le filtre RevealTrans - pour Transition=. Dans l'exemple ci-dessus, le filtre RevealTrans est utilisé pour tous les cas dans les deux fichiers avec Transition=12.
Dans l'Explorer Internet MS 5.0 l'exemple ci-dessus ne pouvait être retracé.
|
| |
 |
Bibliothèque DHTML générale
|
 |
Liaison de données (seulement Microsoft)
|
| SELFHTML/Aides à la navigation HTML dynamique Les différents modèles DHTML |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
