tutorial for Cross Browser Compatible CSS opacity
At earlier stage of CSS the opacity property of element is big issue to make compatible with all browsers.but now CSS3 almost modern browsers support this property.Even though it takes time to rule CSS3 the web world.Here we see example.
Download Source Code
css-opacity-source code-example
CSS Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .toggleopacity img { filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } .toggleopacity:hover img { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; } |
HTML Code
1 2 3 4 5 6 7 8 9 | <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CSS opacity tutorials and example</title> </head> <body> <a href="#yourlink" class="toggleopacity"> <img src="round.jpg" alt="My round" width="32" height="32" /> </a> <a href="#yourlink" class="toggleopacity"> <img src="round.jpg" alt="My round" width="32" height="32" /> </a> </body> </html> |
Setting Opacity of element with Javascript
Below Javascript function set the element opacity to at desired level for given element.
if opacity is 0 specified ,it hides the element as there no need to display the element further.
function changeOpac(opacity, id) { var object = document.getElementById(id).style; if(opacity == 0) { object.display = 'none'; } else { object.display = 'block'; } object.opacity = (opacity / 100); object.MozOpacity = (opacity / 100); object.KhtmlOpacity = (opacity / 100); object.filter = "alpha(opacity=" + opacity + ")"; }
