[align=center][sup]++++++++++ [color=#ff0000][Class - S] Production[/color] ++++++++++[/sup] [img]http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif[/img][/align] [color=green][b]Credits: javascript.internet.com Dracoknight09 - the man behind the script. genius! XD me [/b][/color] [b]Working on: MSIE, FF[/b] This trick enlarges the image of your Featured Friends and shows their caption when you double click the image. To go to your Friends Pofile, click the [b]NAME[/b] in the captions area. Paste this below your [b]Onload Handler[/b] [quote]var draco = "<center><br><table align=\"center\" border=\"0\"><tr align=\"center\" class=\"title\" color=\"ffffff\" bgcolor=\"C0C0C0\"><b>Double Click The Images To Enlarge</b><br></tr><tr align=\"center\" class=\"f_image\" bgcolor=\"#eeeeee\"><img src=\"[b]IMG1_URL[/b]\" height=\"75\" name=\"image1\" ondblclick=\"enlargeImage1()\" onmouseout=\"dropImage1()\"> <img src=\"[b]IMG2_URL[/b]\" height=\"75\" name=\"image2\" ondblclick=\"enlargeImage2()\" onmouseout=\"dropImage2()\"> <img src=\"[b]IMG3_URL[/b]\" height=\"75\" name=\"image3\" ondblclick=\"enlargeImage3()\" onmouseout=\"dropImage3()\"></tr><tr></tr><tr align=\"center\" class=\"f_image\" bgcolor=\"#eeeeee\"><img src=\"[b]IMG4_URL[/b]\" height=\"75\" name=\"image4\" ondblclick=\"enlargeImage4()\" onmouseout=\"dropImage4()\"> <img src=\"[b]IMG5_URL[/b]\" height=\"75\" name=\"image5\" ondblclick=\"enlargeImage5()\" onmouseout=\"dropImage5()\"> <img src=\"[b]IMG6_URL[/b]\" height=\"75\" name=\"image6\" ondblclick=\"enlargeImage6()\" onmouseout=\"dropImage6()\">"+"</tr><tr align=\"center\" class=\"appear\" color=\"ffffff\" bgcolor=\"C0C0C0\"><div id=\"object\" border=\"2\"><i>Friends Box With Expanding Images<br> Created By: <b>Dracoknight09</b><br>Special Thanks To: Ducheszv</i></div></tr></table>"+"<br>Credits To: Duchshiknight2008"+"</center>"; document.getElementById('content_2').style.height='100%'; document.getElementById('content_2').style.overflowY='hidden'; document.getElementById('content_2').innerHTML = "<table width='100%'><tr><td align='center'>"+draco+"</td></tr></table>";[/quote] Don't forget to edit the [b]Bolded Parts[/b] And this at the bottom of your JS [quote]function enlargeImage1(){ image1.height="150" var ht = document.getElementById("object"); ht.innerHTML="<div align=\"center\"><a href=\"http://profiles.friendster.com/[b]USERID[/b]\" target=\"_blank\"><b>[b]NAME[/b]</a><br>[b]CAPTION_OF_IMG1[/b]<br>[b]CAPTION_OF_IMG1[/b]<br>[b]CAPTION_OF_IMG1[/b]<br>[b]CAPTION_OF_IMG1[/b]</div>"; } function dropImage1(){ image1.height="75" } function enlargeImage2(){ image2.height="150" var ht = document.getElementById("object"); ht.innerHTML="<div align=\"center\"><a href=\"http://profiles.friendster.com/[b]USERID[/b]\" target=\"_blank\"><b>[b]NAME[/b]</a><br>[b]CAPTION_OF_IMG2[/b]<br>[b]CAPTION_OF_IMG2[/b]<br>[b]CAPTION_OF_IMG2[/b]<br>[b]CAPTION_OF_IMG2[/b]</div>"; } function dropImage2(){ image2.height="75" } function enlargeImage3(){ image3.height="150" var ht = document.getElementById("object"); ht.innerHTML="<div align=\"center\"><a href=\"http://profiles.friendster.com/[b]USERID[/b]\" target=\"_blank\"><b>[b]NAME[/b]</a><br>[b]CAPTION_OF_IMG3[/b]<br>[b]CAPTION_OF_IMG3[/b]<br>[b]CAPTION_OF_IMG3[/b]<br>[b]CAPTION_OF_IMG3[/b]</div>"; } function dropImage3(){ image3.height="75" } function enlargeImage4(){ image4.height="150" var ht = document.getElementById("object"); ht.innerHTML="<div align=\"center\"><a href=\"http://profiles.friendster.com/[b]USERID[/b]\" target=\"_blank\"><b>[b]NAME[/b]</a><br>[b]CAPTION_OF_IMG4[/b]<br>[b]CAPTION_OF_IMG4[/b]<br>[b]CAPTION_OF_IMG4[/b]<br>[b]CAPTION_OF_IMG4[/b]</div>"; } function dropImage4(){ image4.height="75" } function enlargeImage5(){ image5.height="150" var ht = document.getElementById("object"); ht.innerHTML="<div align=\"center\"><a href=\"http://profiles.friendster.com/[b]USERID[/b]\" target=\"_blank\"><b>[b]NAME[/b]</a><br>[b]CAPTION_OF_IMG5[/b]<br>[b]CAPTION_OF_IMG5[/b]<br>[b]CAPTION_OF_IMG5[/b]<br>[b]CAPTION_OF_IMG5[/b]</div>"; } function dropImage5(){ image5.height="75" } function enlargeImage6(){ image6.height="150" var ht = document.getElementById("object"); ht.innerHTML="<div align=\"center\"><a href=\"http://profiles.friendster.com/[b]USERID[/b]\" target=\"_blank\"><b>[b]NAME[/b]</a><br>[b]CAPTION_OF_IMG6[/b]<br>[b]CAPTION_OF_IMG6[/b]<br>[b]CAPTION_OF_IMG6[/b]<br>[b]CAPTION_OF_IMG6[/b]</div>"; } function dropImage6(){ image6.height="75" }[/quote] You can delete the <br> ... play with it.. [quote][color=red][b]Note: Image dimensions must be adjusted at most 75x75 to 100x100px. Images will be aligned vertically in IE if images are larger than 100x100.[/b][/color][/quote] [b]Preview:[/b] [url=http://profiles.friendster.com/jjptestprofile]Click Me![/url] woott... Enjoy eptokers!

Last edited by ducheszv (2008-05-13 01:00:06)