css opacity tutorial

Posted by mahesh chari Published in css, Html, javascript

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

.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

<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 + ")";
}