By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,702 Members | 1,771 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,702 IT Pros & Developers. It's quick & easy.

Fading in a JPG / Png / ???

P: n/a
I have a client that wants his company logo to fade in on the intro web
page. I'm assuming this can be done with javascript. Does anyone know of an
example I can look at to see how it would be done?

tia
---Michael

Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
EIther a flash movie, or an animated gif, or use one of the filter
effects with a setTimeout to change the opacity/alpha values over time.

Jul 23 '05 #2

P: n/a
Michael Satterwhite wrote:
I have a client that wants his company logo to fade in on the intro web page. I'm assuming this can be done with javascript. Does anyone know of an example I can look at to see how it would be done?

tia
---Michael


Things go better w/Flash...but, since you asked -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>fade-in</title>
<style type="text/css">

body {
background: #000;
}
#logo1 {
display: block;
width: 256px;
height: 256px;
margin: 80px auto 0 auto;
border-width: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0) ;
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
#logo2 {
display: block;
position: relative;
top: -76px;
width: 279px;
height: 209px;
margin: 0 auto;
border-width: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}

</style>
<script type="text/javascript">

function FadeIn(img_id, sec)
{
var o = this;
var el = document.getElementById(img_id);
this.s = el.style;
this.sname =
'undefined' != typeof this.s['filter'] ?
'filter' :
'undefined' != typeof this.s['opacity'] ?
'opacity' :
'undefined' != typeof this.s['MozOpacity'] ?
'MozOpacity' :
'undefined' != typeof this.s['KhtmlOpacity'] ?
'KhtmlOpacity' : '';
this.is = 0;
this.chk = (/filter/.test(this.sname));
this.end = this.chk ? 100 : .99;
this.inc = this.chk ? 1 : .01;
this.intv = Math.round((sec * 1000) / 100);
this.timer = null;
this.set_opac = function(v)
{
if (this.sname)
{
this.s[this.sname] = (this.chk) ?
'alpha(opacity=' + v + ')' : '' + v;
}
}
this.fade_in = function()
{
this.timer = window.setInterval(
function()
{
o.set_opac(o.is += o.inc);
if (o.is >= o.end)
window.clearInterval(o.timer);
}, this.intv);
}
}

window.onunload = function()
{
window.clearInterval(x.timer);
window.clearInterval(xx.timer)
window.onload = null;
}

window.onload = function()
{
x = new FadeIn('logo1', 3);
xx = new FadeIn('logo2', 4);

x.fade_in();
setTimeout('xx.fade_in()', 2000);
}

</script>
</head>
<body>
<img id="logo1" alt="logo1"
src="http://www.findthebesthere.com/Coca-Cola_logo5.gif" />
<img id="logo2" alt="logo2"
src="http://www.mchappys.com/mariettasodamuseum/images/cc19.gif" />
</body>
</html>

Jul 23 '05 #3

P: n/a
"Michael Satterwhite" <sa*****************@weblore.com> wrote in message
news:jh*******************@fe2.texas.rr.com...
I have a client that wants his company logo to fade in on the intro web
page. I'm assuming this can be done with javascript. Does anyone know of an example I can look at to see how it would be done?


The following is a link to my first ever semi-commercial website. It gets
updated whenever I get the time, which isn't often, so please be gentle with
the critiques. :-)

http://www.ghpkendal.co.uk/HomePage.asp

That has a linked script which fades in and out one image with a static
image beneath so it appears to switch between the two. The script for the
scroller is in there as well. I'm no javascript guru but it seems to work
well enough. If it's useful then feel free to use it - afterall, I learnt
how to do it by reading this newsgroup so it's time I gave something back.

If you're going to opt for javascript to change the opacity of a layer then
watch out for the Mozilla opacity rendering bug - changing the opacity to
100% causes a brief flicker, the hack is to change the opacity to 99.9%
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.