Rechercher  

Que celles et ceux qui ne maîtrisent pas en détail les feuilles de style, ou CSS (Cascading Style Sheets), se rassurent: les filtres que nous allons voir ne sont pas compliqués à mettre en place. Si néanmoins vous souhaitez approfondir vos connaissances dans ce domaine, consultez nos tutoriels CSS.

Afin de rentrer dans le vif du sujet, voici d'ores et déjà de quoi il retourne:
(ATTENTION: les effets qui suivent ne fonctionnent que sous IE, et pour certains, seulement avec la version 5.5).

Diminuer l'effet

Augmenter l'effet

Cette image est en réalité stockée sous une forme "normale" (aucune déformation), nous agissons ici sur les paramètres du filtre "wave" pour modifier notre image.

Techniques d'application

Appliquons l'effet "blur" à notre image de la manière la plus simple possible :

<img src="mon_image.jpg" width="50" height="50" border="0">

... il suffit de rajouter le paramètre "filter" et le nom de celui-ci :

<img style="filter:blur" src="mon_image.jpg" width="50" height="50" border="0" alt="Effet blur">

Nous obtenons l'effet recherché :

Avant :

Après :

Cet exemple est le plus simple que nous puissions construire sur une image. Notez tout de même que les filtres, dont voici les noms et syntaxes (menu de gauche), sont paramétrables. Certains filtres passent même inapercus par défaut, il en est ainsi pour le filtre "alpha" qui permet de jouer sur la transparence de l'image.

<img style="filter:alpha" src="mon_image" width="50" height="50" border="0" alt="Effet alpha">

Par défaut on obtient une image conforme à l'originale. Appliquons au filtre "alpha" l'attribut "opacity"' (de 0 : transparent, à 100 : aucun changement) :

<img style="filter:alpha(opacity=20)" src="mon_image" width="50" height="50" border="0" alt="Effet alpha">

L'attribut "opacity" permet le passage d'une image conforme à l'originale à une image presque transparente :

Effet "alpha" sans attribut :

... Avec l'attribut "opacity=20" :

Nous venons de le voir, modifier le paramètre "opacity" sur une image est simple et rapide. Qu'en est-il pour un site entier ? Admettons que vous souhaitiez modifier le "degré" de transparence de toutes vos images. Afin de faciliter les choses, admettons également qu'elles possèdent déjà toutes la même valeur pour l'attribut "opacity", mais le problème reste de taille.
Un "Rechercher / Remplacer" sur l'ensemble de vos lignes de code n'est pas une solution très élégante, et c'est parfois une opération risquée. Nous allons donc construire un fichier "css" qui va centraliser nos souhaits en matière de filtres.

Dans chaque fichier où des filtres sont utilisés, vous allez insérez derrière le tag "body", la ligne suivante :

<link href="jdn.css" rel="stylesheet" type="text/css">

Cette instruction indique où se trouve le fichier qui contient la définition de vos filtres. Ici c'est le fichier "jdn.css", dans le même répertoire, qui les possède. A quoi ressemble ce fichier ? Rien de compliqué :

img.inversion { filter: invert; }

Cette simple ligne définit un filtre appelé "inversion", de la même manière, ou presque, que nous l'aurions utilisé dans le tag <IMG>.

Par la suite, si nous désirons appliquer ce filtre à l'une de nos images, il nous suffira d'indiquer :

<img class="inversion" src="mon_image" width="50" height="50" border="0" alt="inversion des couleurs par le fichier.css">

Nous obtenons sans surprise :

Ainsi pour le degré de transparence de nos images, il suffit d'indiquer dans le fichier.css :

img.transparence { filter:alpha(opacity=20);}

Ce paramètre ne sera alors à modifier que dans ce fichier et pas dans toutes les pages qui utilisent ce filtre.

Autres exemples, autre syntaxe

Si jusqu'à maintenant nous avons appliqué ces transformations sur des images, notez que de simples mots peuvent aussi être modifiés :

Le début de cette phrase est classique, pas la fin !

Pour parvenir à ce résultat, nous utilisons la balise <SPAN> pour insérer notre filtre (ici "flipH", une inversion horizontale) :

<span style="width: 70; height: 5;filter: FlipH">pas la fin !</span>

"width" définit la quantité d'espace dont nous avons besoin pour afficher sur une seule ligne notre morceau de phrase.

Il existe de nombreux autres filtres que nous vous laissons découvrir. Sachez également que CSS permet quelques effets de transition, comme celui-ci (fonctionne sous IE 5.5) :

Cet exemple utilise une fonction JavaScript qui permet le passage de l'image initiale à la finale :

<script language="JavaScript">
function Transition()
{
     document.all.object.filters[0].Apply();
     document.all.object.src="jdnetsmall.jpg";
     document.all.object.filters[0].Play();
}
</script>

Voici la nouvelle syntaxe d'accès aux filtres propre à IE 5.5 (qui garde la compatibilité avec les méthodes vues précedemment) :

<img id=object style="filter:progid:DXImageTransform.Microsoft.Wheel(duration=3)" src="jdnetsmallinv.jpg">

Si vous souhaitez explorer davantage le monde des filtres CSS, vous pouvez tester cet exemple très complet sur l'étendue des possibilités de filtrage d'une image via CSS.

[Arnaud Gadal 7 novembre 2001 , JDNet]

Les outils de développement dans le Guide des Solutions
e-business

L'encyclopédie JDNet Toutes les notions pratiques, techniques et économiques relatives à l'e-business.
>> Accès à la rubrique "Développement"

Comparez les prix Matériel, PDA, modems...
Les bonnes affaires de la high-tech avec Kelkoo.
>> Comparateur