Who are the staff Widget?

[Reiki of Unmei]

I have started creating a cross-over role play site and my coder is learning about things just like I am doing the same as we have never made a site before.
A couple of the sites we have been part of has a section in the widgits that show who the admin and moderators are on the site, as I am only learning, I don't know how I would be able to do that or what the codes would be for the making of this. Would there be anyone who could help?

[Sandara]

Hello! What type of staff widget do you want (how does it appear, etc.?) Or what exactly do you look for?

Usually, they just do the make / add the code in the forum widget (ACP>Modules>Forum Widget)

[Reiki of Unmei]

Well, I am looking for a widget which will show the admins and moderators with chosen pictures of them, and when the cursor goes over those smaller pictures, it appears in the large image on the widget, a lot like this print screen from http://fairytail.rpgboard.net/



I was wandering if that was possible to do.

[Ultron's Vision]

Mmmm, this isn't as difficult as it seems.

It uses a 'simple' jQuery .hover() function, if you can wait a bit until I'm on my PC, I could do something similar for you.

[Sandara]

Create a widget in ACP>Modules>Forum Widget Mgt.

In the body of the widget / widget source section, add this:

Code:


<img src="*url of the big image where you can see the hover images*" name="showperson" align="middle">
<br>
<img src="*url of the chibi image 1" onmouseover*="swap(this,'showperson','*appoint a name 1*')"></img>
<img src="*url of the chibi image 2" onmouseover*="swap(this,'showperson','*appoint a name 2*')"></img>

</center>

<script type="text/javascript">
var mloi=new Object();
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;
}

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",
 '*the name you appointed in chibi 1*', '*url of the hover image 1*',
 '*the name you appointed in chibi 2*', '*url of the hover image 2*'
 );
</script>


Change the ones in asterisks with the description i entered.

[Reiki of Unmei]

For some reason its not working, it not showing the images...

[Reiki of Unmei]

oh wait it doesn't matter, I have figured it out, thank you !!

[Sanket]

Did you replace the images URL's in the code?

Please don't double/triple post. Your post need to be separated by 24 hours before bumping, replying or adding more information. Please use the edit button instead!

Topic Solved & Locked