Staff Widget Coding Help? Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
3 posters

    Staff Widget Coding Help?

    MockingJaye
    MockingJaye
    MockingJaye
    Forumember


    Female Posts : 30
    Reputation : 1
    Language : English
    • Post n°1

    Solved Staff Widget Coding Help?

    Post by MockingJaye 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:

    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
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°2

    Solved Re: Staff Widget Coding Help?

    Post by Ange Tuteur 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
    • Back to top
    MockingJaye
    MockingJaye
    MockingJaye
    Forumember


    Female Posts : 30
    Reputation : 1
    Language : English
    • Post n°3

    Solved Re: Staff Widget Coding Help?

    Post by MockingJaye 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:
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°4

    Solved Re: Staff Widget Coding Help?

    Post by Ange Tuteur 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
    • Back to top
    MockingJaye
    MockingJaye
    MockingJaye
    Forumember


    Female Posts : 30
    Reputation : 1
    Language : English
    • Post n°5

    Solved Re: Staff Widget Coding Help?

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

    Yay it worked, thank you<3
    • Back to top
    brandon_g
    brandon_g
    brandon_g
    Manager
    Manager


    Male Posts : 10113
    Reputation : 923
    Language : English
    Location : USA
    • Post n°6

    Solved Re: Staff Widget Coding Help?

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

    Topic solved and archived ~ brandon_g



    Staff Widget Coding Help? Brando10
    Remember to mark your topic Staff Widget Coding Help? Solved15 when a solution is found.
    General Rules | Tips & Tricks | FAQ | Forgot Founder Password?

    Staff Widget Coding Help? Scre1476
    Team Leader
    Review Section Rules | Request A Review | Sticker Points
    • Back to top