Filtres pour les images

Bonjour,

Commençons par décortiquer le code en lui-même.

Pour cela, nous allons prendre le premier code de filtre à image qui permet de les mettre en « noir et blanc ».

Voici le code dans sont entièreté.

Code:

<style>a:hover img {FILTER: Normal; } img {FILTER: progid:DXImageTransform.Microsoft.BasicImage (Grayscale=1); } </style>

Tout d’abord, vous remarquerez que toutes les modifications graphiques commencent et finissent par les balises

Code:

<style>code CSS</style>

Ensuite se trouvant juste après la balise

Code:

<style>

La balise

Code:

a :hover img

Cette balise donne l’information suivante au navigateur : quand le curseur passe au dessus d’une image comportant un lien elle doit activer un effet X.

L’effet ici ce trouve référencé juste à coté dans la balise suivante

Code:

{FILTER: Normal; }

Ce code informe le navigateur que « le filtre qui serra activé lors du passage du curseur sur l’image est (normal) c'est-à-dire que l’image serra telle qu’elle est, sens aucune modification. »

Les informations ayant été données au navigateur concernant le passage du curseur, il faut maintenant informer le navigateur de ce que doit faire l’image quand le curseur ne passe pas sur l’image.

Cela est exprimé par les codes suivants.

Code:

img

Ainsi le terme « img » donne au navigateur l’information suivante : quand l’image n’est pas activée par un lien ou (si elle possède un lien) et que l’on ne passe pas dessus elle doit activer le filtre X.

Le filtre quand à lui est activé par le code suivant

Code:

 {FILTER: progid:DXImageTransform.Microsoft.BasicImage (Grayscale=1); }

Le code est long, je vous le concède, il y a une raison à cela. C’est que le filtre fait partie d’un protocole purement « Internet Explorer relié à Microsoft ». C’est pour cela qu’il faut notifier quel programme de Microsoft doit activer la modification. Le filtre en lui-même dit : Ce filtre « noir & blanc » doit être activé par le programme DXImage pour lui donner l’effet escompté.

Et pour finir le code, et bien on donne l’information suivante disant que concernant l’effet image le code est fini et donc nous concluons par la balise

Code:

</style>

Donc, voici les différents filtres dans une liste non exhaustive. Il vous suffi de copier/coller ces codes entre les balises :

Code:

<style>a:hover img {VOTRE FILTRE ICI; } img {VOTRE FILTRE ICI; } </style>

N’oublier donc pas que…

Code:

a :hover img

…représente l’image qui est active

Et que…

Code:

img

…représente l’image qui est inactive


Sens plus tarder voici les noms de chaque filtre

« Filtre normal» : conserve votre image dans sont état d’origine.

Code:

FILTER: Normal

« Filtre noir & blanc » : comme sont nom l’indique met votre image en (noir & blanc)

Code:

FILTER: progid:DXImageTransform.Microsoft.BasicImage (Grayscale=1)

* Vous pouvez changer la valeur de (grayscal=1) pour le rendre plus noir, si vous voulez vous pouvez y mettre le chiffre, 2, 3, 4, etc…
Je ne vous conseille pas d’y toucher si vous avez du mal à travailler avec les codes.

« Filtre négatif » : également le nom parle par lui-même, un effet négatif.

Code:

FILTER: XRay

« Filtre de couleur » : je n’ai pas vraiment su mettre de nom sur ce filtre car tout dépend de la couleur de l’image, elle peut sembler verte et blanche si votre image est rouge, et rouge quand votre image est verte…

Code:

FILTER: Invert

« Filtre floue » : rend vos images floues.

Code:

FILTER: progid:DXImageTransform.Microsoft.Blur( PixelRadius=3,MakeShadow=false)

*Là aussi vous pouvez changer la valeur de « PixelRadius=3 » par une valeur plus élevée ou moins élevée pour atténuer ou augmenter le floue de l’image.
De même que pour le « noir & blanc » éviter d’y toucher si vous avez du mal avec les codes.

« Filtre gris à relief» : ce filtre donne du relief aux symbolex et dessins de l’image qui sont le plus contrasté, et rend l’image grise.

Code:

FILTER: progid:DXImageTransform.Microsoft.Emboss()

« Filtre gris à relief de renfoncement » : ce filtre est comparable au précédent, mis à part qu’il donne un effet renfoncé aux dessins et symboles d’une image qui sont les plus contrastés.

Code:

FILTER: progid:DXImageTransform.Microsoft.Engrave()

« Filtre à pixel » : rend un effet pixel à votre image, qui bien souvent la rend totalement incohérente.

Code:

FILTER: progid:DXImageTransform.Microsoft.Pixelate

*Conseil : à n’utiliser que si vous mettez des images comprenant des liens.

« Filtre à inversion vertical » : en d’autre terme vos images sont retournées « tête en bas ».

Code:

FILTER: FlipV

« Filtre miroir » : vos images sont inversées comme dans un miroir.

Code:

FILTER: FlipH

« Filtre ovaliser » : vos images sont découpées en partie et ont une forme ovale.

Code:

FILTER: progid:DXImageTransform.Microsoft.Alpha( style=2,opacity=100,finishOpacity=0)

*L’opacité de l’image peut être modifiée dans la valeur « opacity=100 ». Sachez que plus vous descendez dans les nombres plus l’opacité est grande.


Pour conclure brièvement. Les filtres sont majoritairement visibles sur IE "Internet Explorer" ainsi, Mozilla FireFox, Netscape, et autre navigateur n'arrive pas à les décoder et à ce moment là vos images ne subissent aucun changement quand vous les visualisez avec ces navigateurs là.

Si vous avez vraiment du mal avec les filtres, contactez moi par MP, dites moi quel effet vous voulez pour une image inactive et pour une image active, et je vous transmettrai le code que vous n’aurez plus qu’à copier dans votre « Myspace ».


Amicalement

Axandro

Information Importante !

Les filtres ne fonctionnent pas sous Mozilla FireFoX...

Nous cherchons pour voir si cela est possible en les modifiant mais à ce jour, aucune possibilité n'est connue par nous

Bien à vous,

A suivre...

Salut a tous,

L'affaire est réglée. Ce code permet de mettre l'opacité sur Mozilla, IE et d'autres navigateurs.

Les % pour les autres filtres s'expriment avec des virgules exemple :

Si pour (opacity=20) vous devrez marquer 0.2 pour les autres. De même pour une opacité de 50% vous devez mettre 0.5 pour les autres.

Voici le code :

Code:

<STYLE>
img{border-color:000000; border-width:0px;border-style solid;filter:Alpha(Opacity=50);-moz-opacity:0.5; opacity:0.5; -khtml-opacity:0.5}a:hover img{border-color:rgb(206, 45, 0);
border-width:1px;border-style solid;filter:Alpha(Opacity=100);-moz-opacity:1; opacity:1; -khtml-opacity:1}
</STYLE>


La premiere partie donne l'opacité a l'état naturel

Code:

img{border-color:000000; border-width:0px;border-style solid;filter:Alpha(Opacity=50);-moz-opacity:0.5; opacity:0.5; -khtml-opacity:0.5}

La deuxiéme partie donne l'opacité quand on passe sur une image.

Code:

a:hover img{border-color:rgb(206, 45, 0);
border-width:1px;border-style solid;filter:Alpha(Opacity=100);-moz-opacity:1; opacity:1; -khtml-opacity:1}

Hey merci ils sont super ch0uuuu ces filtres

(k)