Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Image fade out on page load 1

Status
Not open for further replies.
codecomm

codecomm

Programmer
Feb 14, 2007
121
US
I've got a simple issue of when a user comes to my web page, an image is shown, then fades out/away after 3 seconds. I haven't done this before, but have been hitting Google for the past hour on how to do so.

Should I do this with:
1. CSS
2. Javascript
3. Flash

Any suggestions are welcome!

Thanks!
 
Sort by date Sort by votes
A combination of 1 and 2 would work fine.

Just change the opacity of the image to get it to fade away. Set it up on a timer to iterate and knock down the opacity by 10% every 50 milliseconds or so. Here's a link on how to change opacity settings with javascript and CSS:

CSS:

Javascript:

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
 
Upvote 0 Downvote
I haven't really done anything like this w/ javascript, but I'm sure I can get it figured out.
Click to expand...

Sounds good. If you get stuck post the code you have come up with and we'll help you get it all sorted out.

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
 
Upvote 0 Downvote
Here's what I just got to work.
Thanks for all the suggestions!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Change Left, Top, Width, Height, Color, Opacity (06-March-2007) DRAFT
// by Vic Phillips
// To progressively change the Left, Top, Width, Height, Color, Opacity style
// (or other 'px' style properties) of an element over a specified period of time.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
// If not assigned the style position of the element will be assigned as 'position:absolute;' by the script.
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcChangeLTWHCO('left','tst1',[20,260],2000);'
// where:
// parameter 0 = 'left', 'top', 'width', 'height', 'color', 'background-Color', 'opacity' etc. (string)
// Note: the first character after the hyphen must be be upper case, all others lower case.
// With the exception of opacity and color the property value units is in 'px'.
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = (optional) there are two types of progressive change 'sin' and 'cos' plus a liner change. ('sin', 'cos' or liner, defaults to liner)
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
//
// The function may be re-executed with a different set of parameters (start/finish time, progression type or period)
// whenever required, say from an onclick/mouseover/out event. The original progression type and period parameters
// will be retained unless re-specified, the start and finish parameters must be specified.
//

// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code (about 3.7K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//



// **** Functional Code - NO NEED to Change

var zxcOOPCnt=0;

function zxcChangeLTWHCO(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcplot){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (zxcoop) zxcoop.cngparameters(zxcmde,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
else zxcobj[zxcmde.replace('-','')+'oop']=new zxcLTWHCOOOP(zxcmde,zxcobj,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
}

function zxcLTWHCOOOP(zxcmde,zxcobj,zxcsrtfin,zxccurve,zxctime,zxcplot){
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
if (zxcStyleValue(zxcobj,'position')=='static'&&(zxcmde=='left'||zxcmde=='top')) zxcobj.style.position='absolute';
this.to=null;
this.ref='zxcltwhco'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj;
this.cngparameters(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcplot);
}

zxcLTWHCOOOP.prototype.cngparameters=function(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcplot){
clearTimeout(this.to);
this.mde=this.mde||zxcmde;
zxccurve=zxccurve||this.curve||'';
this.time=zxctime||this.time||2000;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
for (var zxc0=0;zxc0<zxcsrtfin.length;zxc0++){
var zxcobj=document.getElementById(zxcsrtfin[zxc0]);
if (zxcobj){ zxcsrtfin[zxc0]=zxcStyleValue(zxcobj,zxcmde); if (!this.mde.match('olor')) zxcsrtfin[zxc0]=parseInt(zxcsrtfin[zxc0]); }
if (zxcsrtfin[zxc0]==0) zxcsrtfin[zxc0]=0.00001;
}
if (this.mde=='opacity'&&(zxcsrtfin[0]<0||zxcsrtfin[0]>100||zxcsrtfin[0]<0||zxcsrtfin[0]>100)) return;
this.curve=zxccurve.charAt(0).toLowerCase();
this.sf=[(!zxcmde.match('olor'))?[zxcsrtfin[0]]:zxcRGBSplit(zxcsrtfin[0]),(!zxcmde.match('olor'))?[zxcsrtfin[1]]:zxcRGBSplit(zxcsrtfin[1]),[]];
this.srttime=new Date().getTime();
this.inc=Math.PI/(2*this.time);
this.cngltwhco();
}

zxcLTWHCOOOP.prototype.cngltwhco=function(){
var zxcms=new Date().getTime()-this.srttime;
for (var zxc0 in this.sf[1]){ this.sf[2][zxc0]=(this.curve=='s')?Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.sin(this.inc*zxcms)+this.sf[0][zxc0]):(this.curve=='c')?(this.sf[1][0])-Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.cos(this.inc*zxcms)):(this.sf[1][zxc0]-this.sf[0][zxc0])/this.time*zxcms+this.sf[0][zxc0]; }
this.cngstyle(this.sf[2]);
if (zxcms<this.time) this.setTimeOut('cngltwhco();',10);
else this.cngstyle(this.sf[1]);
}

zxcLTWHCOOOP.prototype.cngstyle=function(zxcltwhco){
if (this.mde.match('olor')) this.obj.style[this.mde.replace('-','')]='rgb('+zxcltwhco[0]+','+zxcltwhco[1]+','+zxcltwhco[2]+')';
else if (this.mde!='opacity') this.obj.style[this.mde.replace('-','')]=Math.max(zxcltwhco[0],0)+'px';
else this.opacity(zxcltwhco[0]);
}

zxcLTWHCOOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100) return;
if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
}

zxcLTWHCOOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

function zxcStyleValue(zxcel,zxcp){
if (zxcel.currentStyle) return zxcel.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcRGBSplit(zxccol){
if (zxccol.match('#')){ zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol.substring(5,7),16); }
zxccol=zxccol.replace(/[rgb()\s]/g,'').split(',');
return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
}


//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--

function Srt(){
setTimeout("zxcChangeLTWHCO('opacity','tst1',100,0,'sin',3000)",3000);
}

//-->
</script></head>

<body onload="Srt();">
<img id="tst1" src="myimage.jpg" width="351" height="263">

</body>

</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
747
Kennelbloke
Kennelbloke
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
439
JScannell
JScannell
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
582
rogerte
rogerte
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
609
JScannell
JScannell
penguinspeaks
  • Locked
  • Question
JS Open print dialog page to print a file
Replies
0
Views
236
penguinspeaks
penguinspeaks

Part and Inventory Search

Sponsor

Back
Top