HomeStaff Widget Coding Help?
3 posters
Page 1 of 1
Staff Widget Coding Help?
by MockingJaye Thu 29 Oct 2015 - 7:53
Hi, I'm having trouble with some coding for this staff widget, I'm trying to add two people but when I do the mini icon shows up but it wont show the larger icon when you put your mouse over the mini icon.
I've tried adding onto the end but it doesn't seem to work, can anyone help?
Site link: http://thevoid.forumotion.net/
Version is: PHPBB2
Thank you in advance for the help.
- Here's the code:
- <div style="height:6px">
</div>
<div class="module main">
<div class="main-head">
<div class="h3">
<div align="center">
</div>
</div>
</div>
<div class="main-content clearfix">
<div style="text-align: center;">
<br /><img id="showperson" border="1" align="middle" src="https://i.imgur.com/NrH8jyb.gif" style="border: 0px solid black; width: 140px; height: 232px;" /> <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",
'The King',
'https://i.imgur.com/7fPyskN.jpg',
'Darth Kannabis',
'https://i.imgur.com/gHyOZzX.png',
'Jesterrestial',
'https://i.imgur.com/12Tfu7H.png');
//
</script>
<div style="font-size: x-small; text-align: center;">
<span style="font-size: x-small;">ADMINISTRATORS</span> <br /><br /> <a onmouseover="swap(this,'showperson','The King')" href="http://thevoid.forumotion.net/u1"><img alt="The King" style="border: 0px black solid; height: 40px; width: 40px;" src="https://i.imgur.com/uFbUeCY.png" border="0" /></a><a onmouseover="swap(this,'showperson','Darth Kannabis')" href="http://thevoid.forumotion.net/u2"><img alt="Darth Kannabis" style="border: 0px black solid; height: 40px; width: 40px;" src="https://i.imgur.com/r6r67jL.png" border="0" /></a> <a onmouseover="swap(this,'showperson','Jesterrestial')" href="http://thevoid.forumotion.net/u3"><img alt="Jesterrestial" style="border: 0px black solid; height: 40px; width: 40px;" src="https://i.imgur.com/WoP5qKA.png" border="0" /></a> <br />
</div>
</div>
</div>
I've tried adding onto the end but it doesn't seem to work, can anyone help?
Site link: http://thevoid.forumotion.net/
Version is: PHPBB2
Thank you in advance for the help.
Last edited by MockingJaye on Thu 29 Oct 2015 - 10:45; edited 1 time in total
MockingJaye- Forumember
-
Posts : 30
Reputation : 1
Language : English -
Re: Staff Widget Coding Help?
by Ange Tuteur Thu 29 Oct 2015 - 9:57
Hi @MockingJaye,
When you add new images, you also need to update the setSwap() function. For example, I add this HTML link :
The third parameter swap(this,'showperson','Ange') is not yet set, so we need to edit setSwap() and add 'Ange' plus an image affiliated with it :
If any questions let me know.
When you add new images, you also need to update the setSwap() function. For example, I add this HTML link :
- Code:
<a onmouseover="swap(this,'showperson','Ange')" href="/u3"><img style="border: 0px black solid; height: 40px; width: 40px;" src="http://i21.servimg.com/u/f21/18/21/41/30/rose10.png" border="0" /></a>
The third parameter swap(this,'showperson','Ange') is not yet set, so we need to edit setSwap() and add 'Ange' plus an image affiliated with it :
- Code:
<script type="text/javascript">
setswap("showperson",
'The King',
'http://i.imgur.com/7fPyskN.jpg',
'Darth Kannabis',
'http://i.imgur.com/gHyOZzX.png',
'Jesterrestial',
'http://i.imgur.com/12Tfu7H.png',
'Ange',
'http://i21.servimg.com/u/f21/18/21/41/30/rose10.png');
//
</script>
If any questions let me know.
Ange Tuteur- Forumaster
-
Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania -
Re: Staff Widget Coding Help?
by MockingJaye Thu 29 Oct 2015 - 10:30
Okay I've updated the code and it still doesn't work. Like the mini icon pops up but when I hover over it it doesn't change to the bigger picture and it doesn't do anything if I click on it. Also the other icons don't show the bigger pic anymore if I hover over them but if I do click on them I am taken to their profile.
Here is the updated code.
Here is the updated code.
- Updated Code:
- <div style="height:6px">
</div>
<div class="module main">
<div class="main-head">
<div class="h3">
<div align="center">
</div>
</div>
</div>
<div class="main-content clearfix">
<div style="text-align: center;">
<br /><img id="showperson" border="1" align="middle" src="https://i.imgur.com/NrH8jyb.gif" style="border: 0px solid black; width: 140px; height: 232px;" /> <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 type="text/javascript">
setswap("showperson",
'The King',
'https://i.imgur.com/7fPyskN.jpg',
'Darth Kannabis',
'https://i.imgur.com/gHyOZzX.png',
'Jesterrestial',
'https://i.imgur.com/12Tfu7H.png',
'Deadbolt',
'https://i.imgur.com/bqTkqIv.png');
//
</script>
<div style="font-size: x-small; text-align: center;">
<span style="font-size: x-small;">ADMINISTRATORS</span> <br /><br /> <a onmouseover="swap(this,'showperson','The King')" href="http://thevoid.forumotion.net/u1"><img alt="The King" style="border: 0px black solid; height: 40px; width: 40px;" src="https://i.imgur.com/uFbUeCY.png" border="0" /></a><a onmouseover="swap(this,'showperson','Darth Kannabis')" href="http://thevoid.forumotion.net/u2"><img alt="Darth Kannabis" style="border: 0px black solid; height: 40px; width: 40px;" src="https://i.imgur.com/r6r67jL.png" border="0" /></a> <a onmouseover="swap(this,'showperson','Jesterrestial')" href="http://thevoid.forumotion.net/u3"><img alt="Jesterrestial" style="border: 0px black solid; height: 40px; width: 40px;" src="https://i.imgur.com/WoP5qKA.png" border="0" /></a> <a onmouseover="swap(this,'showperson','Deadbolt')" u4"="" thevoid.forumotion.net="" http:=""><img alt="Deadbolt" style="border: 0px black solid; height: 40px; width: 40px;" src="https://i.imgur.com/Xq5OxeI.png" border="0" /></a> <br />
</div>
</div>
</div>
MockingJaye- Forumember
- Posts : 30
Reputation : 1
Language : English -
Re: Staff Widget Coding Help?
by Ange Tuteur Thu 29 Oct 2015 - 10:38
Here try this :
I noticed the closing </script> tag was missing before the setswap() script. It should be good now.
- Code:
<div style="height:6px">
</div>
<div class="module main">
<div class="main-head">
<div class="h3">
<div align="center">
</div>
</div>
</div>
<div class="main-content clearfix">
<div style="text-align: center;">
<br /><img id="showperson" border="1" align="middle" src="http://i.imgur.com/NrH8jyb.gif" style="border: 0px solid black; width: 140px; height: 232px;" /> <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",
'The King',
'http://i.imgur.com/7fPyskN.jpg',
'Darth Kannabis',
'http://i.imgur.com/gHyOZzX.png',
'Jesterrestial',
'http://i.imgur.com/12Tfu7H.png',
'Deadbolt',
'http://i.imgur.com/bqTkqIv.png');
//
</script>
<div style="font-size: x-small; text-align: center;">
<span style="font-size: x-small;">ADMINISTRATORS</span> <br /><br />
<a onmouseover="swap(this,'showperson','The King')" href="http://thevoid.forumotion.net/u1"><img alt="The King" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i.imgur.com/uFbUeCY.png" border="0" /></a>
<a onmouseover="swap(this,'showperson','Darth Kannabis')" href="http://thevoid.forumotion.net/u2"><img alt="Darth Kannabis" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i.imgur.com/r6r67jL.png" border="0" /></a>
<a onmouseover="swap(this,'showperson','Jesterrestial')" href="http://thevoid.forumotion.net/u3"><img alt="Jesterrestial" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i.imgur.com/WoP5qKA.png" border="0" /></a>
<a onmouseover="swap(this,'showperson','Deadbolt')" href="/u4"><img alt="Deadbolt" style="border: 0px black solid; height: 40px; width: 40px;" src="http://i.imgur.com/Xq5OxeI.png" border="0" /></a> <br />
</div>
</div>
</div>
I noticed the closing </script> tag was missing before the setswap() script. It should be good now.
Ange Tuteur- Forumaster
- Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania -
MockingJaye- Forumember
- Posts : 30
Reputation : 1
Language : English -
Re: Staff Widget Coding Help?
by brandon_g Thu 29 Oct 2015 - 12:04
Topic solved and archived ~ brandon_g
Remember to mark your topic
when a solution is found.General Rules | Tips & Tricks | FAQ | Forgot Founder Password?
Team Leader
Review Section Rules | Request A Review | Sticker Points
brandon_g- Manager
- Posts : 10113
Reputation : 923
Language : English
Location : USA -
Similar topics» Staff Widget Coding Help? -Take Two
» help with staff widget
» Widget Coding problems
» Widget Mouseover coding issue
» Who are the staff Widget?
» help with staff widget
» Widget Coding problems
» Widget Mouseover coding issue
» Who are the staff Widget?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
