Fade in images using HTML

**benosullivan** · 12-05-2005, 12:01 PM

Hello there,

I want to recreate this effect (please refresh the page if you missed it- just a fade from white to full Black and Whiite image) using HTML and a single frame jpg (in order to reduce the file size and loading time).

at the moment it is 254KB!!

Is it possible?

Many thanks,
Ben

**jscheuer1** · 12-05-2005, 11:01 PM

That cannot be done just using HTML. With a some javascript, it can be done, though not all browsers will support the effect and none will without javascript enabled:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
if (document.all||document.getElementById){
document.write('<style id="tmpStyle" type="text/css">#pic {-moz-opacity:0.00;filter:alpha(opacity=0);opacity:0;-khtml-opacity:0;}<\/style>')
var objG, degree=fadeAssist=0;
if (document.all&&typeof document.documentElement!=='undefined')
document.write('<!--[if GTE IE 5]><script type="text/javascript">fadeAssist=function (obj, degree){try {obj.filters.alpha.opacity=degree}catch(e){obj.style.filter="alpha(opacity="+degree+")"}}<'+'\/'+'script><![endif]-->')
}

function fadepic(obj){
objG=obj
if (!document.getElementById&&!document.all)
return;
var tS=document.all? document.all['tmpStyle'] : document.getElementById('tmpStyle')
if (degree<100){
degree+=5
if (objG.filters&&objG.filters[0]&&fadeAssist)
fadeAssist(objG, degree)
else if (typeof objG.style.MozOpacity=='string')
objG.style.MozOpacity=degree/101
else if (typeof objG.style.KhtmlOpacity=='string')
objG.style.KhtmlOpacity=degree/100
else if (typeof objG.style.opacity=='string'&&!objG.filters)
objG.style.opacity=degree/101
else
tS.disabled=true
setTimeout("fadepic(objG)", 50)
}
else
tS.disabled=true
}

</script>
</head>
<body>
<img id="pic" onload="fadepic(this);" src="domfade.jpg">
</body>
</html>

**benosullivan** · 12-06-2005, 07:11 PM

thanks,

I'll give it a go!

Ben

**surgek2006** · 10-18-2006, 08:07 AM

Wow! This javascript is amazing!

The only problem is that you cannot add two images to fade in at the same time...

<img id="pic" onload="fadepic(this);" src="cd1.jpg">
<img id="pic" onload="fadepic(this);" src="cd2.jpg">

I want two different cds to fade in at once.

How do you do that?

**jscheuer1** · 10-19-2006, 04:40 AM

Twey, from these forums, came up with an object oriented script that accomplishes this same task. The advantage to object oriented scripts is that they can be used as many times as you like on the same page. It is a very different script however but, a good one. It can be found here:

http://www.twey.co.uk/?q=fading

**surgek2006** · 10-19-2006, 05:30 AM

Seems like the other site is way over-complicated and I dont want to get into all that...

I think that all I have to do is rename the second picture with a different ID number...but it doesn't seem to work.

I know its something simple. Just one simple change to this script...

I sure hope SOMEONE can help me...

Thanks!

Thread: Fade in images using HTML

Thread Tools

Search Thread

Fade in images using HTML

Bookmarks

Bookmarks

Posting Permissions