|
|
 |
 |
 |
|
 |
|
 |
|
|
|
   |
|
 Principe
des filtres
Le
filtre Alpha - (Fusionner l'avant-plan et l'arrière-plan)
Le
filtre Blur - (Effet d'estompe)
Le
filtre Chroma - (Couleur transparente)
Le
filtre DropShadow - (Ombrage)
Le
filtre Shadow - (Effet d'ombres)
Le
filtre Xray - (Effet négatif photo)
Le
filtre FlipH - (Symétrie sur axe horizontal)
Le
filtre FlipV - (Symétrie sur axe vertical)
Le
filtre BlendTrans - (Fondus-enchaînés)
Le
filtre RevealTrans - (Autres fondus-enchaînés)
Un
exemple très sympa |
|
1. Les filtres spéciaux
compatibles IE
Les feuilles de style offrent beaucoup plus de possibilités.
Vous pouvez affecter à des passages de votre choix d'un fichier
HTML, une couleur d'arrière plan distincte, une image d'arrière
plan (papier peint) distincte ou divers cadres. Vous pouvez positionner
au pixel près dans la fenêtre d'affichage du navigateur
WWW, des éléments de votre choix, que ce soit un graphique,
un tableau, ou un passage avec plusieurs de ces éléments.
Des filtres spéciaux enfin, qui à l'heure actuelle sont
encore spécifiques Microsoft permettent des effets graphiques
pour des textes normaux et des images, effets qui nous sont connus
par des programmes graphiques comme PhotoShop ou Fireworks.
Nous aborderons ici uniquement les principaux filtres, valables uniquement
pour Internet Exporer de Microsoft.
Dans la partie Javascript, nous étudirons plus en détail
la combinaisons de certains filtres avec du Javascript.
Avec filter: vous pouvez spécifier un effet de filtre. Derrière
les deux points suit l'appel d'un filtre. certains filtres demandent
des paramètres d'autres non. Les paramètres et leurs
valeurs doivent être noté entre parenthèses juste
derrière le nom du filtre, comme dans l'exemple ci-dessus (strength=50)
a été transmis au filtre Blur comme paramètre.
Si un filtre ne demande aucun paramètre, notez quand même
les parenthèses en les laissant vide de contenu.
Vous pouvez également combiner plusieurs filtres. Dans le
deuxième des exemples ci-dessus par exemple, les deux filtres
Blur() et FlipH() ont été combinés. Pour cela
vous n'avez besoin que de notez une fois le mot clé filter:.
Entre ce mot clé et le point virgule qui termine la mention
de feuilles de style, vous pouvez noter plusieurs filtres. Séparez
ces filtres par un espace avant le nom du filtre suivant, comme
dans l'exemple avant FlipH().
Les filtres sont uniquement conçus
pour les repères HTML suivants (ils ne fonctionnent pas avec
d'autres):
<body> (l'effet concerne toute le page affichée)
<button> (L'effet concerne la surface cliquable)
<div> (L'effet concerne le passage en relation avec
les mentions de feuilles de style width: et/ou height: et/ou position:)
<img> (l'effet concerne le graphique référencé)
<input> (l'effet concerne le champ de saisie)
<marquee> (l'effet concerne le texte déroulant)
<span> (L'effet concerne le passage en relation avec
les mentions de feuilles de style width: et/ou height: et/ou position:)
<table> (l'effet concerne le tableau)
<td> (l'effet concerne la cellule de donnée
d'un tableau)
<textarea> (l'effet concerne le champ de saisie de
plusieurs lignes)
<tfoot> (l'effet concerne le passage de pied d'un tableau)
<th> (l'effet concerne la cellule d'entête d'un
tableau)
<thead> (l'effet concerne le domaine d'entête
d'un tableau)
<tr> (l'effet concerne la ligne d'un tableau)
|
 |
Le
filtre Alpha (fusion d'images)
Le but ici est de fusionner l'arrière plan et une image
d'avant plan.
Avec le filtre Alpha(): vous pouvez fusionner ensemble l'avant
plan et l'arrière plan. Le filtre est approprié
par exemple pour des graphiques qui apparaissent sur des graphiques
d'arrière plan. Ce filtre attend les paramètres
suivants:
opacity :
degré de couverture au début de la fusion. Les valeurs
permises sont comprises entre 0 et 100.
La valeur 0 signifie: tout à fait transparent (l'arrière
plan transparaît);
La valeur 100 signifie: tout à fait opaque (L'arrière
plan est invisible).
finishopacity :
degré de couverture à la fin de la fusion. Les valeurs
permises sont comprises entre 0 et 100.
La valeur 0 signifie: tout à fait transparent (l'arrière
plan transparaît);
La valeur 100 signifie: tout à fait opaque (L'arrière
plan est invisible).
style :
style dans lequel agit l'effet. Les valeurs permises sont 0, 1,
2 et 3.
- 0 signifie: l'arrière plan et le premier plan
voient leurs valeurs de couleurs additionnées. Les couleurs
de l'élément de premier plan sont manipulées
en conséquence. Pas de fusion. Les mentions pour les autres
paramètres ne sont dans ce cas pas nécessaires,
c'est à dire Alpha(style=0) suffit.
1 signifie: fondu linéaire à partir d'un
point de départ que vous définissez vous-même
à un point d'arrivée que vous définissez
vous-même. Au point de départ est valable la valeur
mentionnée pour opacity=. À partir du point d'arrivée
la valeur pour opacity= perd son influence, et c'est la valeur
pour finishopacity= qui domine. Spécifiez le point de départ
à l'aide de startx= et starty=, et le point d'arrivée
par finishx= et finishy=.
- 2 signifie: fondu radial (elliptique) de l'intérieur
vers l'extérieur. Tout à fait à l'intérieur
est valable la valeur mentionnée pour opacity=, tout à
fait à l'extérieur la valeur mentionnée pour
finishopacity=. Dans ce cas vous pouvez omettre les mentions pour
startx=, starty=, finishx= et finishy= comme dans l'exemple ci-dessus.
- 3 signifie: fondu rectangulaire de l'intérieur
vers l'extérieur. Tout à fait à l'intérieur
est valable la valeur mentionnée pour opacity=, tout à
fait à l'extérieur la valeur mentionnée pour
finishopacity=.Dans ce cas vous pouvez omettre les mentions pour
startx=, starty=, finishx= et finishy= comme dans l'exemple ci-dessus.
startx :
point de départ à partir du bord gauche de l'élément
de premier plan horizontalement et en pixels. N'est significatif
qu'en relation avec style=1.
starty :
point de départ à partir du bord supérieur
de l'élément de premier plan verticalement et
en pixels. N'est significatif qu'en relation avec style=1
finishx :
point d'arrivée à partir du bord gauche de l'élément
de premier plan horizontalement et en pixels. N'est significatif
qu'en relation avec style=1
finishy :
point d'arrivée à partir du bord supérieur
de l'élément de premier plan verticalement et
en pixels. N'est significatif qu'en relation avec style=1.
Exemple :
Code
HTML : <td style="background-image:url(../img/filtres/back.jpg);
padding:30pt;" align="center"><img
src="../img/filtres/palm.jpg" style="filter:Alpha(opacity=100,
finishopacity=0, style=2)" width="154"height="102"></td>
|
|
Le filtre Blur (Effet d'estompe)
Ce filtre permet d'appliquer un effet d'estompe aux graphiques
en HTML.
Avec le filtre Blur(): vous pouvez définir un effet d'estompe.
Ce filtre est approprié pour les graphiques. Ce filtre
attend les paramètres suivants:
add :
Vous n'avez besoin de mentionner ce paramètre que si
vous voulez noter add=0. Alors les contours du graphiques n'apparaissent
plus du tout et seule la trace estompée apparaît
à l'écran. L'effet en est renforcé, le
graphique lui même ne peut souvent plus être reconnu.
direction :
Avec ce paramètre vous mentionner la direction dans laquelle
conduit la trace estompée. On a alors l'impression que
le graphique vient de cette direction. Les valeurs permises
sont 0, 45, 90, 135, 180, 225, 270, 315:
0 signifie: la trace estompée désigne le haut.
45 signifie: la trace estompée désigne le haut
à droite.
90 signifie: la trace estompée désigne la droite.
135 signifie: la trace estompée désigne le bas
à droite.
180 signifie: la trace estompée désigne le bas.
225 signifie: la trace estompée désigne le bas
à gauche.
270 signifie: la trace estompée désigne la gauche.
315 signifie: la trace estompée désigne le haut
à gauche.
strength :
Avec ce paramètre vous spécifier quelle force
doit avoir l'effet d'estompe. 0 signifie pas d'effet d'estompe,
chaque valeur plus élevée désigne la trace
estompée en pixels. Veillez pourtant que le graphique
est représenté dans sa taille normale. Les traces
estompées de contours très proches du bord de
l'image ne seront tracées que jusqu'au bord de l'image.
Exemple :
Code HTML :
<img src="../img/filtres/ferrari1.jpg"
style="filter:Blur(direction=270, strength=50)"
width="140"height="60"
border="0">
Le filtre Chroma (Transparence
d'une couleur)
Avec le filtre Chroma(): vous pouvez définir une couleur
dans un graphique comme transparente.
Le filtre attend les paramètre suivants:
color :
Une mention hexadécimale conforme à HTML de la
couleur qui doit être définie comme devant être
transparente.
Exemple :
Code HTML
: <img src="../img/filtres/perroquet.jpg"
width="153" height="144"
border="0" style="filter:Chroma(color=#FFFFFF)">
|
|
Le filtre Dropshadow ( effet
d'ombrage )
Avec le filtre DropShadow(): vous pouvez imposer un ombrage.
Le filtre attend les paramètres suivants:
color :
Une mention hexadécimale conforme à HTML de la
couleur qui doit être définie comme ombre (voir
définir les couleurs en HTML).
offx :
nombre de pixels horizontalement pour l'effet d'ombrage. Les
nombres positifs créent un ombrage à droite, les
nombres négatifs précédés du signe
moins un effet d'ombrage à gauche.
offy :
nombre de pixels verticalement pour l'effet d'ombrage. Les nombres
positifs créent un ombrage en bas, les nombres négatifs
précédés du signe moins un effet d'ombrage
en haut.
Exemple :
Bienvenue !!
|
|
Voici le code HTML :
<p
style="width:380; font-size:48pt; color:#990000;
filter:DropShadow(color=#FFFF66, offx=5, offy=5)">Bienvenue
!! </p>
Le filtre Shadow ( effet
d'ombrage dégradé)
Avec le filtre Shadow(): Vous pouvez créer une ombre dégradée
autour des contours d'un élément.
Ce filtre attend les paramètres suivants:
color :
Une mention hexadécimale conforme à HTML de la
couleur de l'ombre (voir définir les couleurs en HTML).
direction :
Avec ce paramètre vous donnez la direction dans laquelle
se dirige l'ombre. Les valeurs permises sont 0, 45, 90, 135,
180, 225, 270, 315:
0 signifie: L'effet d'ombre se dirige vers le haut.
45 signifie: L'effet d'ombre se dirige vers le haut à
droite.
90 signifie: L'effet d'ombre se dirige vers la droite.
135 signifie: L'effet d'ombre se dirige vers le bas à
droite
180 signifie: L'effet d'ombre se dirige vers le bas.
225 signifie: L'effet d'ombre se dirige vers le bas à
gauche.
270 signifie: L'effet d'ombre se dirige vers la gauche.
315 signifie: L'effet d'ombre se dirige vers le haut à
gauche.
Effet
d'ombres en dégradé !
Code HTML : <div align="left"
style="width:380; font-size:40pt; color:#FF0000; filter:Shadow(color=#000000,
direction=45)">Effet d'ombres en dégradé
!</div>
|
|
Le filtre Xay ( effet de
négatifs photos)
Ce filtre convertit toutes les couleurs d'un élément
ou d'un graphique en nuances de gris et provoque l'effet d'un
négatif photo.
Exemple :
 Une
photos traditionnelle sans aucun filtre.
La
même photo avec un filtre Xray.
Code HTML : <img src="img/filtres/manequin.jpg"
width="138" height="183" border="0"
align="middle" style="filter: XRay()">
Le filtre FlipH (symétrie
sur axe horizontal)
Avec ce filtre vous pouvez afficher un graphique comme s'il avait
pivoté sur son axe horizontal.
Exemple :
Code HTML : <img src="img/filtres/ordinateur.jpg"
width="197" height="139" border="0"
style="filter: FlipH();">
|
|
Le filtre FlipV ( symétrie
sur axe vertical)
Avec ce filtre vous pouvez afficher un graphique comme s'il avait
pivoté sur son axe vertical.
Exemple :
Code HTML : <img src="img/filtres/2A.gif"
width="183" height="172" border="0"
style="filter: FlipV() Chroma(color=#FFFFFF)">
|
|
Le filtre BlendTrans ( effet
de transition)
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é 3 - qui signifie 3 secondes.
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 notre exemple, un passage JavaScript est défini
dans l'entête de fichier. C'est là que les 3 images
concernées (image1, image2 et image3) 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 3 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.
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.
|
|
Exemple :
Voici le code Javascript : A placer entre les balises <HEAD>
et </HEAD> de préférence.
<script language="JavaScript">
<!--
image1 = new Image();
image1.src = "../img/filtres/hiver.jpg"; //
saisissez ici le chemin de vos propres images
image2 = new Image();
image2.src = "../img/filtres/soleil.jpg"; //
saisissez ici le chemin de vos propres images
image3 = new Image();
image3.src = "../img/filtres/collines.jpg"; //
saisissez ici le chemin de vos propres images
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 if(image == 2)
{
image = 3;
document.all.imagedyna.filters.blendTrans.Apply();
document.all.imagedyna.src = image3.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>
Puis insérez votre image dans le <BODY>
de votre page
<img
id="imagedyna" src="../img/filtres/hiver.jpg"
style="filter:blendTrans(Duration=3)"
onClick="changeimage()" width="250"
height="188" border="0">
Il faut savoir que vous pouvez appliquer ce filtre sur du texte.
|
|
| |
Le filtre RevealTrans ( Autre
effet de transition)
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.
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>
<table><tr><td>...</td></tr></table>
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. ( 1 pour
une seconde )
Avec Transition, vous mentionnez la façon dont doit
agir le filtre.
Le tableau suivant donne les valeurs autorisées :
|
|
|
|
|
|
| Transition 0 |
Effet de boite
extérieur vers intérieur |
Transition 12 |
Effet d'émiettement dans toutes les directions |
| Transition 1 |
Effet de boite
intérieur vers extérieur |
Transition 13 |
Effet d'enroulement des 2 côtés
extérieur vers intérieur |
| Transition 2 |
Effet de cercle
extérieur vers intérieur |
Transition 14 |
Effet d'enroulement des 2 côtés
intérieur vers extérieur |
| Transition 3 |
Effet de cercle intérieur vers extérieur |
Transition 15 |
Effet de fermeture
de haut en bas |
| Transition 4 |
Effet d'enroulement
du bas vers le haut |
Transition 16 |
Effet d'ouverture
de haut en bas |
| Transition 5 |
Effet d'enroulement
du haut vers le bas |
Transition 17 |
Effet d'enroulement
haut/droite vers bas/gauche |
| Transition 6 |
Effet d'enroulement
de gauche à droite |
Transition 18 |
Effet d'enroulement
bas/droite vers haut/gauche |
| Transition 7 |
Effet d'enroulement
de droite à gauche |
Transition 19 |
Effet d'enroulement
haut/gauche vers bas/droite |
| Transition 8 |
Effet de rayures
de gauche à droite |
Transition 20 |
Effet d'enroulement
bas/gauche vers haut/droite |
| Transition 9 |
Effet de rayures
du haut vers le bas |
Transition 21 |
Effet de stores
horizontal |
| Transition 10 |
Effet de rectangles
de gauche à droite |
Transition 22 |
Effet de stores
vertical |
| Transition 11 |
Effet de rectangles
du haut vers le bas |
Transition 23 |
choix aléatoire d'un des 23 Effets
précédents |
|
|
Exemple avec du texte :
Voici la première partie du texte...
Dans cet exemple, la première phrase est remplacée
par une seconde phrase au bout de 2 secondes. Cette seconde phrase
provient de la droite vers la gauche et ce remplacement intervient
durant un délai d'une seconde.
Voici le code HTML :
<div id="montexte" style="width:600px;
height:100px;
font-size:24pt; filter:revealTrans(Duration=1,Transition=7)">
Voici la première partie du texte...
</div>
<script language="JavaScript">
<!--
window.setTimeout("change()",2000);
function change()
{
document.all.montexte.filters.revealTrans.Apply();
document.all.montexte.innerText = "...et voici le reste du
paragraphe !!";
document.all.montexte.filters.revealTrans.Play();
}
//-->
</script>
La méthode SetTimeout de l'objet window
permet de déclencher une fonction suivant un chronomètre
ou un délai en milliseconde.
Exemple avec une image :
En cliquant sur le bouton, vous déclenchez la fonction Javascript
"changeimg()"; l'image affichée "golden2.jpg"
est alors remplacée par l'image "golden3.jpg" avec
un effet de transitiond de cercle de l'intérieur vers l'extérieur.
 
|
|
Code HTML :
<script language="JavaScript">
<!--
function changeimg()
{
document.all.imagedyna.filters.revealTrans.Apply();
document.all.imagedyna.src = "img/ouest/golden3.jpg";
document.all.imagedyna.filters.revealTrans.Play();
}
var img="imagedyna";
var src="img/ouest/golden2.jpg"
function RefreshIMG()
{
document.images[img].src=src+"?a="+Math.random(1);
}
//-->
</script>
<a href="javascript:changeimg()">
<img src="img/apercu.gif"
width="66" height="13" border="0"></a>
<img src="../img/global/1010.gif"
width="50" height="10" border="0">
<img id="imagedyna" src="img/ouest/golden2.jpg"
style="filter:revealTrans(Duration=5,Transition=3)" width="100"
height="100" border="0">
<img src="../img/global/1010.gif" width="50"
height="10" border="0">
<a href="javascript:RefreshIMG()"><img
src="img/reload.gif" width="80" height="13"
border="0"></a>
Autre exemple :
Le but ici est de faire apparaître ou de masquer sur commande
une image en utilisanr telle ou telle transition.
L'exemple contient d'abord deux boutons.
Les deux boutons appellent chacun une fonction JavaScript.
Le bouton "Afficher" appelle la fonction apparition()
pour faire apparaître l'image et l'autre bouton "masquer"
la fonction disparition() pour faire disparaître
cette même image.
Dans un premier temps, par la mention de feuilles de style visibility:hidden
l'affichage de l'image est caché.
En cliquant sur le bouton "Afficher", la fonction Javascript
apparition() est appelée. Cette fonction modifie,
entre l'appel de Apply() et de Play() du filtre revealTrans(),
l'affichage de l'image à faire apparaître sur: visible.
Le filtre est exécuté, et le graphique apparaît
avec le fondu-enchaîné prescrit (transition = 1).
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.
|
|
|
|
 |
| |
Voici les deux fonctions JavaScript :
<script language="JavaScript">
<!--
function apparition()
{
document.all.sun.filters.revealTrans.Transition = 1;
document.all.sun.filters.revealTrans.Apply();
document.all.sun.style.visibility = "visible";
document.all.sun.filters.revealTrans.Play();
}
function disparition()
{
document.all.sun.filters.revealTrans.Transition = 0;
document.all.sun.filters.revealTrans.Apply();
document.all.sun.style.visibility = "hidden";
document.all.sun.filters.revealTrans.Play();
}
//-->
</script>
et le code HTML :
<a href="javascript:apparition()"><img
src="img/afficher.gif" width="80" height="13"
border="0"></a>
<br>
<br>
<br>
<br>
<a href="javascript:disparition()"><img
src="img/masquer.gif" width="80" height="13"
border="0"></a>
|
|
|
|
|
|
|
|
 |
|
 |
|
|
 |
|
 |
|
Recherche
par
mots-clés : |
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|
|
