Code isn't working

Hey, I'm trying to use this code but it isn't working at all for my forum.

Code:


<!-- style of the widget -->
<style type="text/css">#mainBlock { height:150px } /* height of the main image block */
#staffList { text-align:center; }
#staffList a img {
  border-radius:100px;
  width:50px;
  height:50px;
}</style>
 
<!-- the staff list -->
<div id="staffList">
  <div id="mainBlock">
    <img id="mainImage" src="http://2img.net/i/bl/logo.png" /> 
 </div>
  <a href="/u1">
    <img src="http://i56.servimg.com/u/f56/18/45/41/65/rose_a10.png" alt="http://i59.servimg.com/u/f59/18/45/41/65/rose_210.png" />
  </a>
  <br />
  <a href="/u2">
    <img src="http://i56.servimg.com/u/f56/18/21/60/73/noavaf10.png" alt="http://2img.net/i/fa/admin/icones/help.png" />
  </a>
</div>
   
<!-- technical stuff -->
<script type="text/javascript">(function() {
var img = document.getElementById('staffList').getElementsByTagName('IMG'), main = document.getElementById('mainImage'), def = main.src,i;
for (i=0; i<img.length; i++) {
  if (!/mainImage/.test(img[i].id)) {
    img[i].onmouseover = function() { main.src = this.alt }
    img[i].onmouseout = function() { main.src = def }
  }
}
})();</script>

Kamui wrote:Hey, I'm trying to use this code but it isn't working at all for my forum.

Code:


<!-- style of the widget -->
<style type="text/css">#mainBlock { height:150px } /* height of the main image block */
#staffList { text-align:center; }
#staffList a img {
  border-radius:100px;
  width:50px;
  height:50px;
}</style>
 
<!-- the staff list -->
<div id="staffList">
  <div id="mainBlock">
    <img id="mainImage" src="http://2img.net/i/bl/logo.png" /> 
 </div>
  <a href="/u1">
    <img src="http://i56.servimg.com/u/f56/18/45/41/65/rose_a10.png" alt="http://i59.servimg.com/u/f59/18/45/41/65/rose_210.png" />
  </a>
  <br />
  <a href="/u2">
    <img src="http://i56.servimg.com/u/f56/18/21/60/73/noavaf10.png" alt="http://2img.net/i/fa/admin/icones/help.png" />
  </a>
</div>
   
<!-- technical stuff -->
<script type="text/javascript">(function() {
var img = document.getElementById('staffList').getElementsByTagName('IMG'), main = document.getElementById('mainImage'), def = main.src,i;
for (i=0; i<img.length; i++) {
  if (!/mainImage/.test(img[i].id)) {
    img[i].onmouseover = function() { main.src = this.alt }
    img[i].onmouseout = function() { main.src = def }
  }
}
})();</script>

Hello,

Could you please explain to us what exactly you are trying to do, what this code is for, what is the result of it and how you want this to look like?
And please tell us if the information for your forum on your profile are correct for the link and the forum version.

Thanks.

This is a gif of the code, I basically want to learn how to manipulate it more but it seems to not be working on my forum when I place the code in. @Luffy

FORUM LINK http://narutogaiden.forumotion.com/

Hello,
I can't see your widget on your forum.

like i said in your other topic

Pebbles wrote:

Kamui wrote:@pebbles I think the codes you guys gave me isn't compatible with my forum. I have phpBB2

do you know where to add the javascript? its at modules and then Javascript codes management

and just try and add the above in a new widget

I already tried that @pebbles. @Van-Helsing I set up the widget but this is how it looks. http://narutogaiden.forumotion.com/

Make sure that the editor is in Source Code mode. Click the white piece of paper in the editor toolbar so that it is highlighted, and THEN paste the code.

Okay it worked, another question is. How can I set this type of design up? It's like a pyramid effect, like how can I add the pictures side by side? Also, how can I create some space between the main picture and the smaller ones. I don't want them over lapping.