[b]Description[/b]: This is a generic fader script that can be applied to element(s) on the page to make them gradually fade into view when the mouse rolls over them, and fade out when out. in short the [b]blurry[/b] effect Image Preview: Embedded Clock [img]http://img364.imageshack.us/img364/6315/clcokjk0.jpg[/img] Embedded Youtube [img]http://img364.imageshack.us/img364/2803/youtubeqf2.jpg[/img] [quote][b]Credits: [/b] Sis Aya a.k.a forsakendoll for her layout.. Sis Switpotato for firefox box tweak Bro Shirow Dynamicdrive again[/quote] [b]This trick is crossbrowser friendly[/b] [b]Requirements:[/b] Addbox Function and patience Step 1: Paste this code below all your js codes... [spoiler]<">[/spoiler] Done? Ok good :idea: [b]How to apply[/b] for embedded clock, youtube, cbox... just paste this: [b]class='gradualfader[/b]' and refer below where... [quote]// Clock Application var header="Time Check"; var code="<embed src=\"http://www.adamdorman.com/flash/glow.swf\" width=\"190\" height=\"190\" [b]class='gradualfader'[/b] type=\"application/x-shockwave-flash\" wmode=\"transparent\" quality=\"high\"></embed>"; addBox(header,code,"custombox_275","right");[/quote] [hr][hr][hr] Instruction: Just look for the <iframe> tag [quote]//Cbox Application var cboxer="<div align='center' id='cboxdiv'>"+ "<iframe frameborder='0' width='98%' height='300' [b]class='gradualfader'[/b] src='http://www3.cbox.ws/box/?boxid=29038154&boxtag=zas22zx&sec=main' marginheight='2' marginwidth='2' scrolling='auto' allowtransparency='yes' name='sbox' id='sbox'></iframe><br/>"+ .......... ..... .. Code[/quote] [hr][hr][hr] [quote]//Banner Application var NavLang = document.getElementById("navLang"); var masamune = "<div align='center'><img src='[b]URL OF YOUR BANNER[/b]'WIDTH='???'HEIGHT='???' [b]class='gradualfader'[/b]></div>"; navLang.innerHTML = masamune; navLang.style.height="auto"; navLang.style.overflow="hidden";[/quote] [hr][hr][hr] [quote]//Other image Application <img src="[b]URL_OF_IMAGE[/b] " [b]class='gradualfader'[/b] />[/quote] [hr][hr][hr] [b]Reminder:[/b] if you want to use this effect for embedded youtube you need to set it [b]autoplay = 1[/b] [quote]// Youtube Application var header="Frailty"; var coder="<object width='290' height='250' [b]class='gradualfader'[/b]><param name='movie' value='http://www.youtube.com/v/8KOuBLjNRL0&rel=1&[color=red]autoplay=1&border=2'[/color]></param><param name='wmode' value='transparent'></param><embed src='http://www.youtube.com/v/8KOuBLjNRL0&rel=1[color=red]&autoplay=1&border=2[/color]'type='application/x-shockwave-flash' wmode='transparent' width='295' height='250' [b]class='gradualfader'[/b]></embed></object>"; addBox(header,coder,"custombosx_275","right");[/quote] [hr][hr][hr] For mp3 player it's up to you if you want to use this effect.. because as far as i know.. if the user hover the mouse to your mp3 player.. your player will play again from the start.. [b]Step 2:[/b] After you chose the trick you want for your profile it's time to paste it inside your [b]onload handler and add this code [color=blue]gradualFader.init()[/color][/b] [quote][color=green]function onProfileLoad() {[/color]//START OF ONLOAD HANDLER // Clock Application var header="Time Check"; var code="<embed src=\"http://www.adamdorman.com/flash/glow.swf\" width=\"190\" height=\"190\" [b]class='gradualfader'[/b] type=\"application/x-shockwave-flash\" wmode=\"transparent\" quality=\"high\"></embed>"; addBox(header,code,"custombox_275","right"); // Youtube Application var header="Frailty"; var coder="<object width='290' height='250' [b]class='gradualfader'[/b]><param name='movie' value='http://www.youtube.com/v/8KOuBLjNRL0&rel=1&[color=red]autoplay=1&border=2'[/color]></param><param name='wmode' value='transparent'></param><embed src='http://www.youtube.com/v/8KOuBLjNRL0&rel=1[color=red]&autoplay=1&border=2[/color]'type='application/x-shockwave-flash' wmode='transparent' width='295' height='250' [b]class='gradualfader'[/b]></embed></object>"; addBox(header,coder,"custombosx_275","right"); //OTHER CODES/BOXES HERE [color=blue]gradualFader.init()[/color] [color=green]}[/color]//END OF ONLOAD HANDLER[/quote] And we're completely done .. [b]Here's how it takes effect: [/b][url=http://img167.imageshack.us/img167/4112/iframecboxzv0.jpg]Hover your mouse on the element[/url] Live Preview: [url=http://profiles.friendster.com/53375256][Class-S] Production[/url] [hr][hr][hr] [b]PS:[/b] One member just posted almost 50% same topic as this one... you can check it out also .. but i am sure our instructions are completely different and his tutorial is not accurately applicable on IE browser because of the [b]docu write script[/b] [url=http://theftalk.com/t30123-Element-Fader-%5BNon-Overlay%5D.html]Fader for your Images[/url]

Last edited by blurrycloud (2008-05-07 01:10:33)