Fading Images

asgsoft · 09-04-2005, 11:45

Have you ever saw these images where you put the mouse on them and the opicity of a coloured layer decreases and then when you put the mouse of it it goes back to the semi-hedden picture. here is how to do it. for a working example of it go to www.greycobra.com and have a look at the random tutorial pictures at the top.
open up your website and in the head tag insert the following

PHP Code:

  <SCRIPT language=JavaScript>

<!--

nereidFadeObjects = new Object();

nereidFadeTimers = new Object();

function nereidFade(object, destOp, rate, delta){

if (!document.all)

return

if (object != "[object]"){ 

setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);

return;

}

 
clearTimeout(nereidFadeTimers[object.sourceIndex]);

 
diff = destOp-object.filters.alpha.opacity;

direction = 1;

if (object.filters.alpha.opacity > destOp){

direction = -1;

}

delta=Math.min(direction*diff,delta);

object.filters.alpha.opacity+=direction*delta;

if (object.filters.alpha.opacity != destOp){

nereidFadeObjects[object.sourceIndex]=object;

nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);

}

}

//-->

</SCRIPT>

[html]
<body>
<img src=yourimage.gif width="282" height="25" border=0 style=filter:alpha(opacity=20) onMouseOver=nereidFade(this,100,20,10) onMouseOut=nereidFade(this,20,5,5)>
[html]

All you have to do is change the image name and what the starting colour overlay and opicity percentage as in photoshop.
I am sorry only works on IE as far as i know.
If in any dought please do not hesistate to contact me.

Aaron · 09-04-2005, 13:14

How can this be integrated into PHP-Nuke?

asgsoft · 09-04-2005, 13:51

i am very sorry i can't help you with this as i have no experiance with php nuke atall sorry again

**Wistow** · 09-04-2005, 13:52

Just integrate it into the page where you want it

Craig

nin3 · 15-04-2005, 13:15

Nice Effect. I've been looking for something like this.

Zaltan · 16-04-2005, 11:35

Could you please evaluate a little more into what the "nereidFade..." series of functions do and how they are used? I am just in a "learning" JavaScript stage, and the use of every new function makes me curious about it.

Thanks.

Aaron · 16-04-2005, 11:39

Quote:

Originally Posted by Wistow

Just integrate it into the page where you want it

Craig

I know, but I don't know how.

Zaltan · 16-04-2005, 11:45

Well the (long-term) simple answer would be to learn HTML. :p

Otherwise, just put that entire first block of code within the <head> and </head> tags of your page, and then put the following script wherever you'd like the image to appear, replacing "YOURIMAGE.GIF" with the location of an image:

HTML Code:

<img src="YOURIMAGE.GIF" width="282" height="25" border="0" style="filter:alpha(opacity=20)" onMouseOver="nereidFade(this,100,20,10)" onMouseOut="nereidFade(this,20,5,5)">

And I think you can change the width and height attributes too, not sure.

Also note that this will only work for users who are using the Internet Explorer browser.

Aaron · 16-04-2005, 11:51

Quote:

Originally Posted by Zaltan

Well the (long-term) simple answer would be to learn HTML. :p

Otherwise, just put that entire first block of code within the <head> and </head> tags of your page, and then put the following script wherever you'd like the image to appear, replacing "YOURIMAGE.GIF" with the location of an image:

HTML Code:

<img src="YOURIMAGE.GIF" width="282" height="25" border="0" style="filter:alpha(opacity=20)" onMouseOver="nereidFade(this,100,20,10)" onMouseOut="nereidFade(this,20,5,5)">

And I think you can change the width and height attributes too, not sure.

Also note that this will only work for users who are using the Internet Explorer browser.

I don't use HTML anymore.

Tim · 16-04-2005, 14:47

Quote:

Originally Posted by Aaron

I don't use HTML anymore.

If you're not using HTML, how are you making webpages? :?

09-04-2005, 11:45	#1 (permalink)
asgsoft WMT Addict Join Date: Apr 2005 Location: Brighton,UK Posts: 162 iTrader: 0 / 0%	Fading Images Have you ever saw these images where you put the mouse on them and the opicity of a coloured layer decreases and then when you put the mouse of it it goes back to the semi-hedden picture. here is how to do it. for a working example of it go to www.greycobra.com and have a look at the random tutorial pictures at the top. open up your website and in the head tag insert the following PHP Code: <SCRIPT language=JavaScript> <!-- nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); function nereidFade(object, destOp, rate, delta){ if (!document.all) return if (object != "[object]"){ setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return; } clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity; direction = 1; if (object.filters.alpha.opacity > destOp){ direction = -1; } delta=Math.min(directiondiff,delta); object.filters.alpha.opacity+=directiondelta; if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object; nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate); } } //--> </SCRIPT> [html] <body> <img src=yourimage.gif width="282" height="25" border=0 style=filter:alpha(opacity=20) onMouseOver=nereidFade(this,100,20,10) onMouseOut=nereidFade(this,20,5,5)> [html] All you have to do is change the image name and what the starting colour overlay and opicity percentage as in photoshop. I am sorry only works on IE as far as i know. If in any dought please do not hesistate to contact me.

09-04-2005, 13:52	#4 (permalink)
Wistow Moderator Join Date: Mar 2005 Location: Barnsley, UK Posts: 1,001 iTrader: 0 / 0%	Just integrate it into the page where you want it Craig __________________ Webmaster Forum - Online Auctions - Free Traffic

16-04-2005, 11:45	#8 (permalink)
Zaltan Newbie Join Date: Apr 2005 Posts: 13 iTrader: 0 / 0%	Well the (long-term) simple answer would be to learn HTML. :p Otherwise, just put that entire first block of code within the <head> and </head> tags of your page, and then put the following script wherever you'd like the image to appear, replacing "YOURIMAGE.GIF" with the location of an image: HTML Code: <img src="YOURIMAGE.GIF" width="282" height="25" border="0" style="filter:alpha(opacity=20)" onMouseOver="nereidFade(this,100,20,10)" onMouseOut="nereidFade(this,20,5,5)"> And I think you can change the width and height attributes too, not sure. Also note that this will only work for users who are using the Internet Explorer browser.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Fading colours???	Lewis	Website Design Forum	2	27-06-2005 05:26
Fading Links	asgsoft	Website Design Articles	5	14-06-2005 17:50
Expanding Images	Aaron	Programming Articles	0	23-04-2005 21:53
HTML Images	Bmg	Programming Articles	0	07-04-2005 16:24

09-04-2005, 13:14	#2 (permalink)
Aaron WMT Addict Join Date: Apr 2005 Location: Singapore Posts: 238 iTrader: 0 / 0%	How can this be integrated into PHP-Nuke?

09-04-2005, 13:51	#3 (permalink)
asgsoft WMT Addict Join Date: Apr 2005 Location: Brighton,UK Posts: 162 iTrader: 0 / 0%	i am very sorry i can't help you with this as i have no experiance with php nuke atall sorry again

15-04-2005, 13:15	#5 (permalink)
nin3 Newbie Join Date: Apr 2005 Posts: 8 iTrader: 0 / 0%	Nice Effect. I've been looking for something like this.

16-04-2005, 11:35	#6 (permalink)
Zaltan Newbie Join Date: Apr 2005 Posts: 13 iTrader: 0 / 0%	Could you please evaluate a little more into what the "nereidFade..." series of functions do and how they are used? I am just in a "learning" JavaScript stage, and the use of every new function makes me curious about it. Thanks.

Fading Images

Fading Images

Similar Threads