The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Staff Widget Coding Help?

View previous topic View next topic Go down

Solved Staff Widget Coding Help?

Post by MockingJaye on October 29th 2015, 7:53 am

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.

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="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');
//
    </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>    <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 October 29th 2015, 10:45 am; edited 1 time in total

MockingJaye
Forumember

Female Posts : 30
Reputation : 1
Language : English

http://infinitefairytail.canadian-forum.com/

Back to top Go down

Solved Re: Staff Widget Coding Help?

Post by Ange Tuteur on October 29th 2015, 9:57 am

Hi @MockingJaye,

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Staff Widget Coding Help?

Post by MockingJaye on October 29th 2015, 10:30 am

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.

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="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 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')" u4"="" thevoid.forumotion.net="" http:=""><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>

MockingJaye
Forumember

Female Posts : 30
Reputation : 1
Language : English

http://infinitefairytail.canadian-forum.com/

Back to top Go down

Solved Re: Staff Widget Coding Help?

Post by Ange Tuteur on October 29th 2015, 10:38 am

Here try this :
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. Yes

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Staff Widget Coding Help?

Post by MockingJaye on October 29th 2015, 10:45 am

Yay it worked, thank you<3

MockingJaye
Forumember

Female Posts : 30
Reputation : 1
Language : English

http://infinitefairytail.canadian-forum.com/

Back to top Go down

Solved Re: Staff Widget Coding Help?

Post by brandon_g on October 29th 2015, 12:04 pm

Topic solved and archived ~ brandon_g


Remember to mark your topic when a solution is found.

brandon_g
Support Moderator
Support Moderator

Male Posts : 5359
Reputation : 489
Language : English
Location : USA

http://broadcastingduo.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum