Altering CSS with JS [Archive] - Dynamic Drive Forums

freddygusto

04-19-2008, 02:12 AM

Hi guys,
I'm interested in doing something cool with Javascript. Just not sure if it is possible, and how to do it....
Lets say I am using an embedded style CSS definition at the head section of my page. I want the transparency rules:
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;

to go from 1 to 100 in 5 seconds (it has to be done for all three rules in order to have it working in all browsers). And then stay fixed at 100.
I assume only client side script like JS can do this.
Anybody can tell me how to get it? It would be great...
Thanx

rangana

04-19-2008, 03:05 AM

First of all, moz opacity is futile, since FF already understands opacity ;)

...Anyways, give this code a try;)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
img{
filter:alpha(opacity=50);
opacity:.50;
text-align:center;margin:auto;}
#wrap{width:500px;margin:20px auto;border:3px double #aaa;text-align:center;padding:5px;}
</style>
<script type="text/javascript">
var iterate=1,fiterate=0.1,test;
function rangfunc()
{
var obj=document.getElementById('myimage');
obj.style.filter = 'alpha(opacity='+iterate+')';
obj.style.opacity=fiterate;
iterate+=2;
fiterate+=0.02;
test=setTimeout('rangfunc()',50);
}
window.onload = function()
{
var obj=document.getElementById('myimage');
obj.style.filter = 'alpha(opacity=1)';
obj.style.opacity='0.1';
rangfunc();
}
</script>
</head>
<body>
<div id="wrap">
<img src="http://www.hickerphoto.com/data/media/186/nice-provence-france_12218.jpg" alt="myimage" id="myimage"/>
</div>
</body>
</html>

See if it helps :)