como criar esse widget?

imagem no lado direito desse forum onde estao os membros da staff
http://www.fairytailrp.com/
passando o mouse sobre as fotos tem um movimento bem bacana eu gostaria de por isso em meu forum se possivel
grato
link do meu forum 
http://legitspso.forumeiros.com/

Olá,

Crie um novo widget com este código

Código:

<div style="text-align: center;">
             <br /><img style="border: 0px solid black; width: 140px; height: 232px;" src="http://i56.servimg.com/u/f56/18/84/98/25/staff110.png" id="showperson" align="middle" border="1" /> <br />
</div><script type="text/javascript">
    <!--
    // copyright 1998 Idocs, Inc. http://www.idocs.com/tags/
    // Distribute this script freely, but please keep this
    // notice with the code.

    // var image information object
    var mloi=new Object();

    // set the image for swapping
    function setswap()
    {
    if (! document.images)return;
    var imgInfo=new Object();
    imgInfo.defaultImg = new Image();
    imgInfo.defaultImg.src = document.images[arguments[0]].src;
    imgInfo.opts = new Object();
    for (var i=1; i < arguments.length; i=i+2)
      {
      imgInfo.opts[arguments[i]]=new Image();
      imgInfo.opts[arguments[i]].src = arguments[i+1];
      }
    mloi[arguments[0]] = imgInfo;
    }

    // set up the link for swapping
    function swap(link,imgName,optName)
    {
    if (! document.images)return;
    if (! link.swapReady)
      {
      link.imgName    = imgName;
      link.onmouseout = swapBack;
      link.swapReady  = true;
      }
    document.images[imgName].src=mloi[imgName].opts[optName].src;
    }

    function swapBack()
      {document.images[this.imgName].src=mloi[this.imgName].defaultImg.src}

    //-->
    </script><script type="text/javascript">
    setswap("showperson",
    'Owner',
    'http://i56.servimg.com/u/f56/18/84/98/25/staffl10.png',
    'Hikaru',
    'http://i56.servimg.com/u/f56/18/84/98/25/hikaru10.png',
    'Luxin',
    'http://i56.servimg.com/u/f56/18/84/98/25/luxin10.png',
    'Javier',
    'http://i56.servimg.com/u/f56/18/84/98/25/javier10.png',
    'Manzo',
    'http://i56.servimg.com/u/f56/18/84/98/25/manzo10.png',
    'Tenshi',
    'http://i56.servimg.com/u/f56/18/84/98/25/tenshi10.png',
    'Mala',
    'http://i39.servimg.com/u/f39/18/84/98/25/malaca10.png',
    'Shin',
    'http://i39.servimg.com/u/f39/18/84/98/25/shin-k10.png',
    'Kinala',
    'http://i39.servimg.com/u/f39/18/84/98/25/kinala10.png',
    'Kazumi',
    'http://i39.servimg.com/u/f39/18/84/98/25/kazumi10.png',
    'Kaze',
    'http://i39.servimg.com/u/f39/18/84/98/25/kaze10.png',
    'Northot',
    'http://i39.servimg.com/u/f39/18/84/98/25/northo10.png',
    'Gevaudan',
    'http://i39.servimg.com/u/f39/18/84/98/25/gevaud10.png',
    'Jace',
    'http://i39.servimg.com/u/f39/18/84/98/25/jace10.png',
    'Yami',
    'http://i39.servimg.com/u/f39/18/84/98/25/yami10.png',
    'Vera',
    'http://i39.servimg.com/u/f39/18/84/98/25/vera11.png',
    'Sora',
    'http://i56.servimg.com/u/f56/18/84/98/25/sora10.png');
//
    </script>
<div style="text-align: center;">
             <span style="font-size: x-small;">OWNER</span><br /><span style="font-size: x-small;"><a href="http://www.fairytailrp.com/u1" onmouseover="swap(this,'showperson','Owner')"><img src="http://i56.servimg.com/u/f56/18/84/98/25/u111.png" style="border: 0px black solid; height: 40px; width: 40px;" alt="Owner" border="0" /></a><br /></span>         
   <div style="font-size: x-small; text-align: center;">
                <span style="font-size: x-small;">ADMINISTRATORS</span> <br /><a href="http://www.fairytailrp.com/u130" onmouseover="swap(this,'showperson','Luxin')"><img src="http://i56.servimg.com/u/f56/18/84/98/25/lux10.png" style="border: 0px black solid; height: 40px; width: 40px;" alt="Luxin" border="0" /></a> <a href="http://www.fairytailrp.com/u3510" onmouseover="swap(this,'showperson','Javier')"><img src="http://i56.servimg.com/u/f56/18/84/98/25/jav10.png" style="border: 0px black solid; height: 40px; width: 40px;" alt="Javier" border="0" /></a><a onmouseover="swap(this,'showperson','Tenshi')" href="http://www.fairytailrp.com/u2915"><img alt="Tenshi" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i56.servimg.com/u/f56/18/84/98/25/ten10.png" border="0" /></a> <br /> <span style="font-size: x-small;">GLOBAL MODERATORS</span><br /><a onmouseover="swap(this,'showperson','Manzo')" href="http://www.fairytailrp.com/u4898"><img alt="Manzo" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i56.servimg.com/u/f56/18/84/98/25/man10.png" border="0" /></a><a onmouseover="swap(this,'showperson','Kazumi')" href="http://www.fairytailrp.com/u3721"><img alt="Kazumi" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i39.servimg.com/u/f39/18/84/98/25/kazu10.png" border="0" /></a>  <a onmouseover="swap(this,'showperson','Sora')" href="http://www.fairytailrp.com/u1046"><img alt="Sora" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i56.servimg.com/u/f56/18/84/98/25/sor10.png" border="0" /></a>       
      <div style="font-size: x-small; text-align: center;">
                   <span style="font-size: x-small;">MODERATORS</span><br /><a onmouseover="swap(this,'showperson','Northot')" href="http://www.fairytailrp.com/u4183"><img alt="Northot" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i39.servimg.com/u/f39/18/84/98/25/north10.png" border="0" /></a><a onmouseover="swap(this,'showperson','Gevaudan')" href="http://www.fairytailrp.com/u4641"><img alt="Gevaudan" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i39.servimg.com/u/f39/18/84/98/25/gev10.png" border="0" /></a> <a onmouseover="swap(this,'showperson','Kinala')" href="http://www.fairytailrp.com/u4404"><img alt="Kinala" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i39.servimg.com/u/f39/18/84/98/25/kina10.png" border="0" /></a>   
         <div style="font-size: x-small; text-align: center;">
                      <span style="font-size: x-small;"> JUNIOR MODERATORS</span><br /><a onmouseover="swap(this,'showperson','Shin')" href="http://www.fairytailrp.com/u1037"><img alt="Shin" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i39.servimg.com/u/f39/18/84/98/25/shin10.png" border="0" /></a><a onmouseover="swap(this,'showperson','Mala')" href="http://www.fairytailrp.com/u2060"><img alt="Mala" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i39.servimg.com/u/f39/18/84/98/25/mala10.png" border="0" /></a><br />
            <div style="font-size: x-small; text-align: center;">
                <span style="font-size: x-small;"> SUPPORT</span><br /><a onmouseover="swap(this,'showperson','Hikaru')" href="http://www.fairytailrp.com/u672"><img alt="Hikaru" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i39.servimg.com/u/f39/18/84/98/25/hika10.png" border="0" /></a><a onmouseover="swap(this,'showperson','Jace')" href="http://www.fairytailrp.com/u5498"><img alt="Jace" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i39.servimg.com/u/f39/18/84/98/25/jac10.png" border="0" /></a><a onmouseover="swap(this,'showperson','Yami')" href="http://www.fairytailrp.com/u11328"><img alt="Yami" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i39.servimg.com/u/f39/18/84/98/25/yam10.png" border="0" /></a><a onmouseover="swap(this,'showperson','Vera')" href="http://www.fairytailrp.com/u11301"><img alt="Vera" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i39.servimg.com/u/f39/18/84/98/25/ver10.png" border="0" /></a><br />   
            </div>
               
         </div>
            
      </div>
      
   </div>
</div>

Até

xD agradecimentos adiantados pra vc mas tenho uma pergunta e as fotos da minha staff como vou inserir ?

Olá,

E só ir alterando o Link das imagens no código, por exemplo

No código tem este link "https://i.servimg.com/u/f56/18/84/98/25/staffl10.png", e só alterar pela imagem desejada.

Até