Discussion :

[Dionyzos]

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 :



comme ceci :


(en partant du principe que le fond de la page HTML est blanc)


Je connais l'utilisation du code CSS suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

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

[Dionyzos]

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.

[SpaceFrog]

je sais pas un jpg par dessus ?

[Oluha]

ou encore PNG ?

sinon en CSS je fais ca sur du texte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

mais ca ne fonctionne que sous IE

[Dionyzos]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[Oluha]

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