Staff Widget

Greetings again!

I've been looking around, still quite new at this. I am trying to make a "Staff Widget" on my forum Fairy Tail Endless I'm trying to make it so the staff images are miniature and when you scroll the mouse over them, a larger image of the staff appears above them. I hope there is a simple solution for this

Hi @Itami,

Would this be what you're looking for ?
https://help.forumotion.com/t136908-hover-staff-list#924551

Yes, this is what I am looking for. It keeps things organized while looking professional.

This is the current widget, granted iw ill be changing the photos when my buddy makes the gfx.

Spoiler:

This is the code for it.

Code:

<center>
 </font>
 <//font><span></span><span></span><span><span></span></span>
 <div id="staffList">
 </div><span><span></span><span></span><span><span></span></span></span>
 <div id="mainBlock">
 </div><span><span></span><span></span><span></span><img src="[url=http://2img.net/i/bl/logo.png]http://2img.net/i/bl/logo.png[/url]" id="mainImage" /> <span></span><span></span><span></span><span></span><span></span><span></span></span>
 <p>
 </p><span><span></span><span></span><span style="FONT-FAMILY: Tahoma"></span>OWNER <span></span><span></span><span></span><span></span><span></span></span>
 <p>
 </p><span><span></span><span></span><a href="[url=http://fairytailendless.forumotion.com/u1"></a><img]http://fairytailendless.forumotion.com/u1"></a><img[/url] src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/a916f23c-957f-4e20-8463-7be83bec631f.png]http://i828.photobucket.com/albums/zz205/Sato_013/a916f23c-957f-4e20-8463-7be83bec631f.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png]http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png[/url]" /> <span></span><span></span><span></span><span></span><br /><span></span></span>
 <p>
 </p><span><span></span><span></span><span style="FONT-FAMILY: Tahoma"></span>ADMINISTRATORS <span></span><span></span><span></span><span></span><span></span></span>
 <p>
 </p><span><span></span><span></span><a href="[url=http://fairytailendless.forumotion.com/u2"></a><img]http://fairytailendless.forumotion.com/u2"></a><img[/url] src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/4b57ce73-f6ed-414c-a0e7-944ee80ceb58.png]http://i828.photobucket.com/albums/zz205/Sato_013/4b57ce73-f6ed-414c-a0e7-944ee80ceb58.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png[/url]" /> <span></span><span></span><span></span><span></span><span></span></span>
 <!--                          technical stuff                          --><script type="text/javascript"></script></span><//span>
</center>

A problem with this, is that when I scroll over the hover-images, the larger image at top does not appear. Also, if you notice in my screenshot- my forum categories' "words" are all jumbled up- I notice it only does this on my computer, as well as sometimes doesn't load the banner & images. Is there a way I could fix that?

Did you paste the code in WYSIWYG mode ? Because it looks like the script content is completely missing. When you paste the code, make sure that you're using source code mode. To do that, click the white sheet of paper and if it's highlighted in white you're using source code mode.

When you use WYSIWYG mode with HTML, CSS, and JavaScript it'll completely mess up the code.

Sorry, I don't understand your explanation. I used the link of example you provided me & copy/pasted it just how I saw it into the Staff widget.

The code should look like this :

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>

but the on you posted is missing the JavaScript which is necessary for switching the images. Try repasting the code, and make sure you're using source code mode.

Alright, so I go to paste that code & ensure the little page icon in the post is highlighted as white. I do that & look on the homepage, everything works fine- I go to put in my images & it messes up?

Are you pasting the images, or using the editor to insert them ? As long as you're using source code mode there should be no problems.

I am pasting the direct links to the images from Photoshop.

So, you're including the images like this ?

Code:

  <a href="LINK">
    <img src="DEFAULT_IMAGE" alt="HOVER_IMAGE" />
  </a>

LINK : The URL of the page you want the image to link to.

DEFAULT_IMAGE : The link of the image shown by default.

HOVER_IMAGE : The link of the image shown at the top when you hover over it.

I take the code you gave me & applied it to the staff widget & applied the images I have like this.

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://i828.photobucket.com/albums/zz205/Sato_013/8eed94bd-b7a8-46f0-99d3-9b5466beea3f.png" alt="http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png" />
  </a>
  <br />
  <a href="/u2">
    <img src="http://i828.photobucket.com/albums/zz205/Sato_013/4b57ce73-f6ed-414c-a0e7-944ee80ceb58.png" alt="http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.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>

However, when I save it- it finally showed up sort of correct, though the staff buttons(the Default images) overlap the Hover images. When I go back to the widget coding to look into it, the coding looks quite different.. like this.

Code:

<div id="staffList">
   <div id="mainBlock"><img src="http://2img.net/i/bl/logo.png" id="mainImage" />
   </div><a href="http://fairytailendless.forumotion.com/u1"><img src="http://i828.photobucket.com/albums/zz205/Sato_013/8eed94bd-b7a8-46f0-99d3-9b5466beea3f.png" alt="http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png" /> </a><br /><a href="http://fairytailendless.forumotion.com/u2"><img src="http://i828.photobucket.com/albums/zz205/Sato_013/4b57ce73-f6ed-414c-a0e7-944ee80ceb58.png" alt="http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png" /> </a>
</div>
<!--  technical stuff  --><script type="text/javascript"></script>

That's weird.. Try doing this and then edit the code. Go to Administration Panel > General > Messages > Configuration > Activate the WYSIWYG mode by default in the posts : NO

It already is set to No.

I tried the code but it does not work when i hover it the image does not look bigger

Itami wrote:It already is set to No.

Then that is good.

The only way the CSS and JavaScript will disappear is if you enter WYSIWYG mode. As long as you're using source there aren't any problems. Did you perhaps enable WYSIWYG to get a preview while you were editing the widget ? See below :

Creating :


Editing :



Everything is still intact.

refresh102 wrote:I tried the code but it does not work when i hover it the image does not look bigger

Please start a new topic for your problems. Thanks

I have not enabled WYSIWYG mode. I have the little page icon highlighted in white when I paste the code you gave me & add my icon links to it. It looks exactly as follows when pasting it, but when I go to edit it, it looks like the super short version with all the java missing.

This is what the widget looks like when I press "save"

Spoiler:

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="[url=http://orig15.deviantart.net/78e3/f/2015/102/9/b/cooltext116805282072215_by_dreamishlyme-d8pevi6.png]http://orig15.deviantart.net/78e3/f/2015/102/9/b/cooltext116805282072215_by_dreamishlyme-d8pevi6.png[/url]" /> 
 </div>
  <a href="/u1">
    <img src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Itami staff.png]http://i828.photobucket.com/albums/zz205/Sato_013/Itami%20staff.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png]http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png[/url]" />
  </a>
  <br />
  <a href="/u2">
    <img src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi staff.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi%20staff.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png[/url]" />
  </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>

That is very weird, because it does not do that for me..

Now that I look at it, your image element's attribute values look like this :

Code:

<img src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi staff.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi%20staff.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png[/url]" />

You have bbcode in there, it should only be the direct links. Like this :

Code:

<img src="http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi staff.png" alt="http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png" />

The editor is probably attempting to correct it and causing an error in the process like usual.

Doesn't matter. I've done it both ways in the past- I just corrected the bbc code and it still shortened it. It looks like this when I save it.

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="[url=http://orig15.deviantart.net/78e3/f/2015/102/9/b/cooltext116805282072215_by_dreamishlyme-d8pevi6.png[/url]http://orig15.deviantart.net/78e3/f/2015/102/9/b/cooltext116805282072215_by_dreamishlyme-d8pevi6.png[/url[/url]]" /> 
 </div>
  <a href="/u1">
    <img src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Itami staff.png]http://i828.photobucket.com/albums/zz205/Sato_013/Itami%20staff.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png]http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png[/url]" />
  </a>
  <br />
  <a href="/u2">
    <img src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi staff.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi%20staff.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png[/url]" />
  </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>

Yet it turns out like this after its finished saving.

Code:

<div id="staffList">
 <div id="mainBlock"><img src="[url=http://orig15.deviantart.net/78e3/f/2015/102/9/b/cooltext116805282072215_by_dreamishlyme-d8pevi6.png]http://orig15.deviantart.net/78e3/f/2015/102/9/b/cooltext116805282072215_by_dreamishlyme-d8pevi6.png[/url]" id="mainImage" />
 </div><a href="[url=http://fairytailendless.forumotion.com/u1"><img]http://fairytailendless.forumotion.com/u1"><img[/url] src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Itami staff.png]http://i828.photobucket.com/albums/zz205/Sato_013/Itami%20staff.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png]http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png[/url]" /> </a><br /><a href="[url=http://fairytailendless.forumotion.com/u2"><img]http://fairytailendless.forumotion.com/u2"><img[/url] src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi staff.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi%20staff.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png[/url]" /> </a>
</div>
<!--  technical stuff  --><script type="text/javascript"></script>

Alright. I know I corrected the bbc code. Yet when I pasted it here, it automatically added the bbc.