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

Spread your code soluces to the world

Love me
Solucior » JAVASCRIPT » Javascript opacity

Javascript opacity

06/03/2011 by Dux   -   4.5/5 (13 ratings)

Here is the method the most compatible to change the CSS opacity of an element with javascript.

opacity // modern browser
-moz-opacity // older versions based on firefox
-khtml-opacity // older versions based on Konkeror and Safari
filter: alpha(opacity) // Internet Explorer before 8.0
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity)" // Internet Explorer 8.0+

You can also use two separate CSS classes to swap with javascript and className. Or the pseudo class hover with CSS.

Demo.

Move your pointer mouse over image
Javascript opacity demo

source code



 
<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)" />

Tested with Safari  Google Chrome  Firefox3  Firefox4  Opera  IE6  IE7  IE8  
Rate this code     |     Copied : 398x

Comments for Javascript opacity

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
Add a comment Nickname
ZOOM


PHP watermark
Javascript opacity