rangana
250+ Club
Joined: 27 Feb 2008
Posts: 271
Location: Cebu City Philippines
|
 Posted: Wed Apr 23, 2008 6:20 am Post subject: Simple Fade Image Script |
 |
|
I have made a script wherein it gives your image a "Fade-In" effect 
Logically, we could play with the opacity feature of CSS 
Combining it with JS could give us an effect similar to PPT's "Fade-In" effect:)
Its full implementation could be seen with a complete script like this:
| Code: |
<!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>
|
|
|
