dégradé transparent sur une image

Bonjour,


Est-il possible en Javascript de créer une transparence progressive (comme un dégradé) sur une image.

Pour être plus précis je cherche à rendre l'image suivante :

http://dionyzos.free.fr/image1.gif

comme ceci :

http://dionyzos.free.fr/image2.gif
(en partant du principe que le fond de la page HTML est blanc)


Je connais l'utilisation du code CSS suivant :

Code:

---

1 2 3

opacity: .8; filter: alpha(opacity=80); -moz-opacity: .8;

---

Mais dans ce cas j'obtiens une transparence de 20% sur toute la surface de l'image, alors que je cherche à avoir en fait une transparence qui va progressivement de 100% de la gauche à 0% vers la droit.

J'ai cherché partout mais rien trouvé :(

Qq'un aurait-il la solution :?:

Merci :)

une image degradée blanche vers transparent mise par dessus l'imge d'origine ?

J'y ai pensé, mais ce n'est malheureursement pas possible car les GIF ne gèrent pas les pixels semi-transparents ; un pixel peut être soit opaque, soit totalement transparent.

C'est bien pour ca que je dois utiliser un script ou un CSS. :roll:

je sais pas un jpg par dessus ?

ou encore PNG ?

sinon en CSS je fais ca sur du texte :

Code:

---

FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=10, FinishX=100);

---

mais ca ne fonctionne que sous IE

T'es trop fort Oluha, grace à toi j'ai trouvé la solution ultime qui marche pour les deux type de browser : l'utilisation d'un PNG progressif pour Mozilla/FF et du CSS pour IE ; genre :

Code:

---

1 2 3 4

<div style="position: absolute; left: 0px; top: 0px; FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=10, FinishX=100);"> <img src="./images/test.png"> </div>

---

En effet le PNG 24bits avec transparence progressive est géré par Mozilla/Firefox, et pour IE qui ne le gère pas, on utilise le FILTER pour reproduire cet effet de transparence.

Merci encore ! :D

contente d'avoir pu t'aider, pour une fois qu'on me dit que je suis douée ! :wink: