[b]I experimented 2 scripts, and arrive @ this new perception. Haha First i saw zoom image effect, in JFX site , then i saw a spoiler code in html forums around the site. So when i tried to merge the two codes, A new idea had come out, regarding featured friends. As we all remember, Somebody already posted Friend lists w/ caption before, It was years ago. I think [/b] Just like the following interpretations of some outstanding contributors: [url=http://theftalk.com/t5751-Friendlist-With-Caption---Updated-Jun-17-08.html]By renalvir[/url] [url=http://theftalk.com/t3361-Friendlists-Caption.html]By Tazmaine[/url] [url=http://theftalk.com/t7326-Friendlist-Caption-Version-2.0-%28-Updated-16-Nov-%29.html]By mdirwan[/url] [quote][b]Description[/b]: [b][color=orange]Turn your featured friends into an advanced friendlists with caption.[/color][/b] [b]Features:[/b] -Added: A spoiler code in it. Not just a simple caption. The spoiler in this trick resembles the spoiler bb code here in FTALK -Added: Zoom effect- Whenever the viewer, put his/her mouse pointer over a friend's pic. It will create a well splendid zoom effect. It is for the viewer to see the image clearly enough.[/quote] screenies [b]onload:[/b] [img]http://i40.tinypic.com/33z6yk8.jpg[/img] [b]on click spoiler[/b] [img]http://i39.tinypic.com/mtm1og.jpg[/img] [b]zoom effect mouse over pic[/b] [img]http://i43.tinypic.com/207q1j7.jpg[/img] Now lets start, Step by Step tut: [b]Step1:[/b] [i] first, paste this bunch of codes,into ur css extension file[/i] This can be modified, according to your preferences. {STYLE} <">[quote][b][color=#FF0000]UPDATE as of March 31,09[/color][/b] [i]If you want to put BG (Background image) Inside your spoiler You may add this in your css extension file:[/i][/quote] [quote].inner { background: #9040d3 url([b]IMAGE URL HERE[/b]); }[/quote] [b] Step2:[/b] [i]This one is for your JS EXTENSION! Edit the bold parts:[/i] [quote]var zoom = document.createElement("script"); zoom.type = "text/javascript"; zoom.src = "http://www.stormpages.com/xiruki/xiru/zoom.js"; document.getElementsByTagName("head")[0].appendChild(zoom); //Advanced Friendlists w/ caption [spoiler & zoom effect collaboration] // IDEA MADE BY XIRUKI [credits to: Javascript-FX] function showSpoiler(obj) { var inner = obj.parentNode.getElementsByTagName("div")[0]; if (inner.style.display == "none") inner.style.display = ""; else inner.style.display = "none"; } window.addEvent('domready', function() { var cp ="<center><table border='1' cellpadding='2' cellspacing='1' width='100%' height='25%'><tr><th bgcolor='gray'><font size='4' color='#000000'>Friends</font></th><th bgcolor='gray'><font size='4' color='#000000'>Descriptions</font></th></tr><tr bgcolor='#000000'><td width='60%'><center><a href='[b]FS ID OF FRIEND 1[/b]'><img src='[b]IMAGE URL F 1[/b]' width='90' height='90' onMouseOver='JSFX.zoomIn(this, 10, 50)' onMouseOut='JSFX.zoomOut(this)'/><br><a href='[b]FS ID OF FRIEND 1 [/b]'>[b]FRIEND 1 name[/b]</a></center></td><td width='100%'><div class='spoiler'><input type='button' onclick='showSpoiler(this);' value='Description'/><div class='inner' style='display:none;'>[b]she's nice and cool[/b]</div></div></td></tr><tr bgcolor='#000000'><td width='60%'><center><a href='[b]FS ID OF FRIEND 2[/b]'><img src='[b]IMAGE URL F 2[/b]' width='90' height='90' onMouseOver='JSFX.zoomIn(this, 10, 50)' onMouseOut='JSFX.zoomOut(this)'/><br><a href='[b]FS ID OF FRIEND 2 [/b]'>[b]FRIEND 2 name[/b]</a></center></td><td width='100%'><div class='spoiler'><input type='button' onclick='showSpoiler(this);' value='Description'/><div class='inner' style='display:none;'>[b]from naruto manga comics, i find her beautiful[/b]</div></div></td></tr><tr bgcolor='#000000'><td width='60%'><center><a href='[b]FS ID OF FRIEND 3 [/b]'><img src='[b]IMAGE URL F 3[/b]' width='90' height='90' onMouseOver='JSFX.zoomIn(this, 10, 50)' onMouseOut='JSFX.zoomOut(this)'/><br><a href='[b]FS ID OF FRIEND 3[/b] '>[b]FRIEND 3 name[/b]</a></center></td><td width='100%'><div class='spoiler'><input type='button' onclick='showSpoiler(this);' value='Description'/><div class='inner' style='display:none;'>[b]she's pretty! my crush heehe[/b]</div></div></td></tr><tr bgcolor='#000000'><td width='60%'><center><a href='[b]FS ID OF FRIEND 4[/b]'><img src='[b]IMAGE URL F 4[/b]' width='90' height='90' onMouseOver='JSFX.zoomIn(this, 10, 50)' onMouseOut='JSFX.zoomOut(this)'/><br><a href='[b]FS ID OF FRIEND 4[/b]'>[b]FRIEND 4 name[/b]</a></center></td><td width='100%'><div class='spoiler'><input type='button' onclick='showSpoiler(this);' value='Description'/><div class='inner' style='display:none;'>[b]cool guy![/b]</div></div></td></tr><tr bgcolor='#000000'><td width='60%'><center><a href='[b]FS ID OF FRIEND 5 [/b]'><img src='[b]IMAGE URL F 5[/b]' width='90' height='90' onMouseOver='JSFX.zoomIn(this, 10, 50)' onMouseOut='JSFX.zoomOut(this)'/><br><a href='[b]FS ID OF FRIEND 5[/b]'>[b]FRIEND 5 name[/b]</a></center></td><td width='100%'><div class='spoiler'><input type='button' onclick='showSpoiler(this);' value='Description'/><div class='inner' style='display:none;'>[b]a strong friend of mine[/b]</div></div></td></tr></table><table border='1' cellpadding='2' cellspacing='1' width='100%' height='17%'><tr bgcolor='#000000'><td width='60%'><center><a href='http://www.friendster.com/friends/[b]UR FS ID HERE[/b]'>[b]View all 10986 friends[/b]</a></center></td></tr></table></center>"; document.getElementById('content_2').style.height='100%'; document.getElementById('content_2').style.overflowY='hidden'; document.getElementById('content_2').innerHTML =cp; });[/quote] [url=http://shirux.fileave.com/spoilerflist.html]QUICK PREVIEW[/url] [url=http://profiles.friendster.com/31744801]TESTED IN FF ONLY[/url] [b][color=violet]However im still findin out, the solution for IE. [/color] [/b] credits: [b] Me Javascript-fx Renalvir Tazmaine Mdirwan[/b]

Last edited by ---xXirukiTepe--- (2009-06-01 09:10:21)