Hover Staff List Help Needed

Okay, I wish to make a hover staff list for my site kinda like the one in the spoiler below

What I have in mind:

I want pretty much the same thing but if it looks a little different, that's fine too.

If anyone can help me make a custom code for a hover staff list that looks like the one in the spoiler,
I'd really appreciate it.

Btw, my forum's CSS is Invision.

I have all the art work for the hover staff list widget as well. I just need the basic code and I can edit everything else.

Thanks in advance~

Hello @Stella Ó hAodha,

Add this to a widget :

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>

A user in the list consists of the following syntax :

Code:

  <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>

The following is a link to the user profile. ( currently the founder; u1 )

Code:

<a href="/u1"></a>

and the image. The image URL in the SRC attribute is the image you'll see by default. The image URL in the ALT attribute is the image you'll see at the top when you hover this image.

Code:

<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" />

i was hoping for an all in one code =w= seeing as i'm a complete noob at coding. i can do simple code edits and add codes to things but that's as far as my knowledge goes...

It is just one code.  Ange Tuteur is explaining parts of it.

If you have any questions, do not hesitate. You'll see by default I have two images setup as an example which you can play with

Code:

  <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>

I also forgot to mention above those images, you'll see the main image :

Code:

  <div id="mainBlock">
    <img id="mainImage" src="http://2img.net/i/bl/logo.png" />
 </div>

Just replace https://2img.net/i/bl/logo.png by the image URL you want to be the default image when not hovering anyone.

would it be possible to put the entire code all together in order of how it should look in my widget? I'm sorry if this is a a pain, its just the different parts of the code all in pieces makes it kind of hard to figure out which part goes where...

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>

i hate to be a bother, but i can't seem to get the code to work right

What my widget looks like currently:

I honestly SUCK at coding T^T Please help me~!

Thanks in advance~

where it says u1 and u2 those are the user ids youre supposed to change the images under them
so it would be img src= your image

i've decided to give up =w= topic can be locked now, thanks for all your help, i was just too much of a noob to be able to do a complex code

Locked upon author's request.