changer l'opacité d'une image en utilisant le javascript

Question

Comment modifier l'opacité d'une image en utilisant le javascript ? Je vais créer un effet de fondu en utilisant javascript, y a-t-il un exemple ? Y a-t-il quelque chose comme image.opacity qui peut être changé par le code JS ? Comment est-il défini ?

merci

Answer 1

Supposons que vous utilisez un simple JS (voir les autres réponses pour jQuery), pour modifier l'opacité d'un élément, écrivez :

var element = document.getElementById('id');
element.style.opacity = "0.9";
element.style.filter  = 'alpha(opacity=90)'; // IE fallback

Answer 2

En fait, vous devez utiliser les CSS.

document.getElementById("myDivId").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");

Il fonctionne sur FireFox, Chrome et IE.

Answer 3

Vous pouvez utiliser le CSS pour définir l'opacité, puis utiliser le javascript pour appliquer les styles à un certain élément du DOM.

.opClass {
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

Utilisez ensuite (par exemple) jQuery pour modifier le style :

$('#element_id').addClass('opClass');

Ou avec du simple javascript, comme ceci :

document.getElementById("element_id").className = "opClass";

Answer 4

Je ne sais pas si vous pouvez le faire dans tous les navigateurs, mais vous pouvez définir la propriété css de l'img spécifié.
Essayez de travailler avec jQuery qui vous permet d'effectuer des modifications css beaucoup plus rapidement et efficacement.
dans jQuery vous aurez la possibilité d'utiliser .animate(),.fadeTo(),.fadeIn(),.hide("slow"),.show("slow") par exemple.
Cet extrait CSS devrait faire le travail pour vous :

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

Consultez également ce site web où tout est expliqué en détail :
http://www.w3schools.com/css/css_image_transparency.asp

Answer 5

Vous pouvez en effet utiliser Jquery ou simplement le bon vieux javascript :

var opacityPercent=30;
document.getElementById("id").style.cssText="opacity:0."+opacityPercent+"; filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity="+opacityPercent+");";

Vous mettez cela dans une fonction que vous appelez sur un setTimeout jusqu'à ce que l'opacité désirée soit atteinte.