Requirements: [li]Patience[/li] [li]J.S. Extension[/li] [b]Step 1:[/b] Paste this code in Your J.S. Extension File: [quote]function changeimage(towhat,url){ if (document.images){ document.images.targetimage.src=towhat.src gotolink=url } } function warp(){ window.location=gotolink } var myimages=new Array() var gotolink="#" function preloadimages(){ for (i=0;i<preloadimages.arguments.length;i++){ myimages[i]=new Image() myimages[i].src=preloadimages.arguments[i] } } preloadimages("[color=blue][b]Large Image 0.jpg/.gif/.png[/b][/color]","[color=blue][b]Large Image 1.jpg/.gif/.png[/b][/color]","[color=blue][b]Large Image 2.jpg/.gif/.png[/b][/color]","[color=blue][b]Large Image 3.jpg/.gif/.png[/b][/color]","[color=blue][b]Large Image 4.jpg/.gif/.png[/b][/color]")[/quote] [li]Prepare a Image with Sizes: Height-150px/ Width: (Not higher the 400px)[/li] [li]Upload the image at http://www.photobucket.com , just register and upload.[/li] [li]After uploading image copy the Direct Link below the Upload image[/li] [b]Example Direct Image Link:[/b] [quote]http://img.photobucket.com/albums/v674/EphimeralKaizer/AbdelA.jpg[/quote] [li]After copying the Direct link paste on the [color=blue][b]Blue Text[/b][/color] on the script above[/li] [b]Example:[/b] [quote]preloadimages("[color=blue][b]http://img.photobucket.com/albums/v674/EphimeralKaizer/AbdelA.jpg[/b][/color]","[color=blue][b]Large Image 1.jpg/.gif/.png[/b][/color]","[color=blue][b]Large Image 2.jpg/.gif/.png[/b][/color]","[color=blue][b]Large Image 3.jpg/.gif/.png[/b][/color]","[color=blue][b]Large Image 4.jpg/.gif/.png[/b][/color]")[/quote] Upload the photo of your Friends at Photo Bucket until all the [color=blue][b]Blue Text[/b][/color] on the script are replaced with image links. [b]Example:[/b] <">If done correctly you should have something like this: <">Now We're done at the 1st step, Now on to step 2: Paste this code on J.S. File: [quote]function friends(){var ephemeral = "<br><a href='javascript:warp()'><img src='[color=brown][b]Base Image.jpg/.gif/.png[/b][/color]'alt='Photo Gallery' name='targetimage' border='0'></a><br><br><marquee style='width:470px;height:80px; border-width:0px; border-color: transparent;border-style: none;'onMouseOver='stop()' onmouseout='start()' scrollamount='2' direction='left' ><a href='[b][color=red]link[/color][/b]' onMouseover='changeimage(myimages[0],this.href)'target='_blank'><img src='[b][color=green] Small Image 1.jpg[/color][/b]'alt='[b][color=orange]Name Of Friends[/color][/b]'></a><a href='[b][color=red]link[/color][/b]' onMouseover='changeimage(myimages[1],this.href)'target='_blank'><img src='[b][color=green] Small Image 2.jpg[/color][/b]'alt='[b][color=orange]Name Of Friends[/color][/b]'></a><a href='[b][color=red]link[/color][/b]' onMouseover='changeimage(myimages[2],this.href)'target='_blank'><img src='[b][color=green] Small Image 3.jpg[/color][/b]'alt='[b][color=orange]Name Of Friends[/color][/b]'></a><a href='[b][color=red]link[/color][/b]' onMouseover='changeimage(myimages[3],this.href)'target='_blank'><img src='[b][color=green] Small Image 4.jpg[/color][/b]'alt='[b][color=orange]Name Of Friends[/color][/b]'></a><a href='[b][color=red]link[/color][/b]' onMouseover='changeimage(myimages[4],this.href)'target='_blank'><img src='[b][color=green] Small Image 5.jpg[/color][/b]'alt='[b][color=orange]Name Of Friends[/color][/b]'></a></marquee>"; document.getElementById('content_1').style.height='230'; document.getElementById('content_1').style.overflow='auto'; document.getElementById('content_1').innerHTML = "<table width='100%'><tr><td align='center'>"+ephemeral+"</td></tr></table>"; }setTimeout("friends()",4000);[/quote] [b]Replace the:[/b] [color=brown][b]Base Image.jpg/.gif/.png[/b][/color] - Starting Image - Height must be 150px [b][color=red]link[/color][/b] - Link to your image. [b][color=orange]Name Of Photo[/color][/b] - Name of Photo or Description. [b][color=green] Small Image 1,2,3,4,5.jpg[/color] [/b] - Replace this with the smaller version of your corresponding image to the 1st script. The image must be [b]75px[/b] in height. [b]Example:[/b] [b]If you hover on this:[/b] [img]http://img.photobucket.com/albums/v674/EphimeralKaizer/AbdelB.jpg[/img] [b]The Image will be enlarged to this:[/b] [img]http://img.photobucket.com/albums/v674/EphimeralKaizer/AbdelA.jpg[/img] [b]If the changes are correct you should have something like this:[/b] [img]http://img.photobucket.com/albums/v674/EphimeralKaizer/PrevA.jpg[/img] Works on Internet Explorer and Firefox... [b]Credits:[/b] Google, Wikipedia, Yahoo, Insomnia, Head Ache, Friendster Talk, Friendster. [b]Tip:[/b] Use Photoshop to resize image in proportion.

Last edited by Ephemeral (2008-03-20 23:28:16)