Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Répandez vos soluces sur la planète

Love me
Solucior » JAVASCRIPT » Opacité avec javascript

Opacité avec javascript

06/03/2011 par Dux   -   4.5/5 (13 notes)

Voici la méthode la plus compatible pour modifier l'opacité CSS d'un élément avec javascript.

opacity // les navigateurs contemporains
-moz-opacity // anciennes versions basées sur Firefox
-khtml-opacity // anciennes versions de Konkeror et Safari
filter: alpha(opacity) // Internet Explorer avant 8.0
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity)" // Internet Explorer 8.0+

vous pouvez aussi utliser deux classes CSS distinctes à intervertir avec javascript et className. Ou une pseudo classe hover en CSS.

Demo.

Move your pointer mouse over image
Javascript opacity demo

code source



 
<script type="text/javascript">

   function
opacity(elm, value) {
       
elm.style.opacity = (value / 10);
       
elm.style.MozOpacity = (value / 10);
       
elm.style.KhtmlOpacity = (value / 10);
       
elm.style.filter = "alpha(opacity=" + (value * 10) + ")";
       
elm.style.MsFilter = " 'progid:DXImageTransform.Microsoft.Alpha(opacity=" + (value * 10) + ")' ";
   }

</script>

<img src="picture1.gif" alt=" " style="width: 400px; height: 50px" onmouseover="opacity(this, 5)" onmouseout="opacity(this, 10)" />

Testé avec Safari  Google Chrome  Firefox3  Firefox4  Opera  IE6  IE7  IE8  
Noter ce code     |     Copié : 398x

Commentaires pour Opacité avec javascript

Fred     12/14/2012 12:00
Don't work with IE8
patty     06/29/2012 17:17
Très bon! merci !
milou     04/25/2012 19:37
merci pour le code ! ça marche super sursafari et chrome
estelle     02/27/2012 20:26
Ce code fonctionne très bien sur IE9 également !!
Modic     11/20/2011 16:01
It's really work
Ajouter un commentaire Pseudo   Site
ZOOM


Opacité avec javascript
Watermark en PHP