First topic message reminder :

Works Best If You're A Set User (Media Box Only).

Requirements:

Image Editor (Paint Shop, Photoshop, GIMP etc...).
Knowledge regarding .js Extension.
Patience.

Step one:

Paste this on your Add Media field.

Code:

<div id='wakiwkiw'>Loading Photo Gallery...</div>

Note: You can replace the word Loading Photo Gallery... with an image or whatever you want.

Press Save.

Step two:

Open a New Text Document and paste this code.

Code:

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("http://i33.tinypic.com/ae89cz.jpg","http://i38.tinypic.com/v3g0g0.jpg","http://i37.tinypic.com/29ap1cl.jpg")

Step 3:

On the code I gave...

You will see...

https://2img.net/h/oi33.tinypic.com/ae89cz.jpg
https://2img.net/h/oi38.tinypic.com/v3g0g0.jpg
https://2img.net/h/oi37.tinypic.com/29ap1cl.jpg

Replace those with images with the exact height. At least 300px Height width proper Width Properties.

Example:

Spoiler:

Notice, that the images are same on height.

Step four:

After modifying the code, by replacing the old images with new images with the same height.

Paste this again on the code.

Code:

function friends(){var ephemeral = "<br><a href='javascript:warp()'><img src='http://i36.tinypic.com/24uyceu.png'alt='Photo Gallery' name='targetimage' border='0'></a><br><br><a href='link' onMouseover='changeimage(myimages[0],this.href)'target='_blank'><img src='http://i33.tinypic.com/ae89cz_th.jpg'style='height:80px;width:auto!important'></a><a href='link' onMouseover='changeimage(myimages[1],this.href)'target='_blank'><img src='http://i38.tinypic.com/v3g0g0_th.jpg'style='height:80px;width:auto!important'></a><a href='link' onMouseover='changeimage(myimages[2],this.href)'target='_blank'><img src='http://i37.tinypic.com/29ap1cl_th.jpg'style='height:80px;width:auto!important'></a>";
document.getElementById('wakiwkiw').innerHTML = "<table width='100%'><tr><td align='center'>"+ephemeral+"</td></tr></table>";
}setTimeout("friends()",4000);

Replace this with your starting image.

https://2img.net/h/oi36.tinypic.com/24uyceu.png

Example:

Spoiler:

Replace:

https://2img.net/h/oi33.tinypic.com/ae89cz_th.jpg
https://2img.net/h/oi38.tinypic.com/v3g0g0_th.jpg
https://2img.net/h/oi37.tinypic.com/29ap1cl_th.jpg

With smaller images that represents the big images before.

Example:

Spoiler:

Replace the link on the Change the link on
Change the link on

Code:

<a href='link'

with your own link or your friend's ID.

Code:

<a href='http://www.yagle.com' onMouseover='changeimage(myimages[0],this.href)'target='_blank'>

or

<a href='USERID' onMouseover='changeimage(myimages[0],this.href)'target='_blank'>

Remember to include the http:// on the outside links.

Step five:

After changing what's needed. Save as... Filename.js and upload on a hosting site.

Get the .js URL and apply to a linker...

http://Azt3chG0dz.googlepages.com/wak0k0nuts.js

Applied to...

Code:

<script src='.js'></script>

Will look like this...

Code:

<script src='http://Azt3chG0dz.googlepages.com/wak0k0nuts.js'></script>

Preview of idea:

http://profiles.friendster.com/37865775#10

Just ask if you're confused...

Note:
You can add more images to the code. Just ask here for more info.

kakaduling

wow awesome ,.

tnx for sharing this

can`t do it :|

http://profiles.friendster.com/42777876

thanks for the info ..