Original Code:

Code:

<div style="text-align: center;">
         <span style="font-size: 10px;"><br /><img id="showperson" style="border: 0px solid black; width: 135px; height: 300px;" src="http://i.imgur.com/w16HhQL.png" align="middle" border="0" /> <br /></span>
</div><span style="font-size: 10px;"> <br /></span><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",
    'Ryan',
    'http://i.imgur.com/aPc8ASZ.png',
    'Anubis',
    'http://i.imgur.com/qoJ2dfH.png',
    'Kaseki',
    'http://i.imgur.com/EE0kEfm.png',
    'Loki',
    'http://i.imgur.com/u4B5e9l.png');
   'Akira',
    'http://i.imgur.com/LzVJmVX.png');
   'Bliss',
    'http://i.imgur.com/UUGLNB2.png');
   'Umiko-chan',
    'http://i.imgur.com/5p3sgUl.png');
   'Hook',
    'http://i.imgur.com/bkyOxOz.png');
   'Katsuro',
    'http://i.imgur.com/QHxuW9A.png');
    //
    </script>
<div style="text-align: center;">
         <span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-weight: bold;">FOUNDER<br /></span></span></span>
</div><span style="font-size: 10px;"><span style="font-size: x-small;"></span></span>
<div style="text-align: center;">
         <span style="font-size: 10px;"><span style="font-size: x-small;">    <a onmouseover="swap(this,'showperson','Ryan')" href="http://shinobigaiden.forumotion.com/u2"><img class="staffavatar" alt="Ryan" src="http://i.imgur.com/5Ndqftv.png" /></a></span> </span>         
   <div style="text-align: center;">
              <span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-weight: bold;">ADMINISTRATORS<br /></span></span></span>     
   </div><span style="font-size: 10px;"><span style="font-size: x-small;"></span></span>     
   <div style="text-align: center;">
              <span style="font-size: 10px;"><span style="font-size: x-small;">  <a onmouseover="swap(this,'showperson','Kaseki')" href="http://shinobigaiden.forumotion.com/u67"><img class="staffavatar" alt="Admin" src="http://i.imgur.com/edsiOaN.png" /></a></span> </span>  <a onmouseover="swap(this,'showperson','Anubis')" href="http://shinobigaiden.forumotion.com/u26"><img class="staffavatar" alt="Admin" src="http://i.imgur.com/MM00nNG.png" /></a>   
      <div style="text-align: center;">
               <span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-weight: bold;">MODERATORS<br /></span></span></span> 
      </div><span style="font-size: 10px;"><span style="font-size: x-small;"></span></span>
      <div style="text-align: center;">
               <span style="font-size: 10px;"><span style="font-size: x-small;">  <a onmouseover="swap(this,'showperson','Loki')" href="http://shinobigaiden.forumotion.com/u28"></a><img class="staffavatar" alt="Mod" src="http://i.imgur.com/7FivWn3.png" />  <a onmouseover="swap(this,'showperson','Bliss')" href="http://shinobigaiden.forumotion.com/u123"></a><img class="staffavatar" alt="Mod" src="http://i.imgur.com/cCzfYtu.png" />  <a onmouseover="swap(this,'showperson','Akira')" href="http://shinobigaiden.forumotion.com/u7"></a><img class="staffavatar" alt="Mod" src="http://i.imgur.com/AYvlK4U.png" />  </span></span>
         <div style="font-size: 10px; text-align: center;">
                  <span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-weight: bold;">DEVELOPERS<br /></span></span></span> 
         </div><span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-size: 10px;"></span><span style="font-size: x-small;"></span></span></span>
         <div style="font-size: 10px; text-align: center;">
                  <span style="font-size: 10px;"><span style="font-size: x-small;">  <a onmouseover="swap(this,'showperson','Hook')" href="http://shinobigaiden.forumotion.com/u14"><img class="staffavatar" alt="Dev" src="http://i.imgur.com/upETRW9.png" /></a>  <a onmouseover="swap(this,'showperson','Umiko-chan')" href="http://shinobigaiden.forumotion.com/u4"><img class="staffavatar" alt="Dev" src="http://i.imgur.com/cCzfYtu.png" /></a>  <a onmouseover="swap(this,'showperson','Katsuro')" href="http://shinobigaiden.forumotion.com/u56"><img class="staffavatar" alt="Dev" src="http://i.imgur.com/0Y3Cnsk.png" /></a>      </span></span>
         </div><span style="font-size: 10px;"><span style="font-size: x-small;"></span></span>
      </div>
      
   </div>
</div>

I was trying to update it with art, and then it got worse.

Code:

<div style="text-align: center;">
                 <span style="font-size: 10px;"><br /><img border="0" align="middle" src="http://oi61.tinypic.com/29dfedh.jpg" style="border: 0px solid black; width: 200px; height: 272px;" id="showperson" /> <br /></span>
</div><span style="font-size: 10px;"> <br /></span><script type="text/javascript">
    <!--

    // 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",
    'Ryan',
    'http://i.imgur.com/aPc8ASZ.png',
    'Anubis',
    'http://i.imgur.com/qoJ2dfH.png',
    'Kaseki',
    'http://i.imgur.com/EE0kEfm.png',
    'Loki',
    'http://i.imgur.com/u4B5e9l.png');
   'Akira',
    'http://i.imgur.com/LzVJmVX.png');
   'Bliss',
    'http://i.imgur.com/UUGLNB2.png');
   'Umiko-chan',
    'http://i.imgur.com/5p3sgUl.png');
   'Hook',
    'http://i.imgur.com/bkyOxOz.png');
   'Katsuro',
    'http://i.imgur.com/QHxuW9A.png');
    //
    </script>         
<div style="text-align: center;">
                     <span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-weight: bold;">ADMINISTRATORS<br /></span></span></span>          <a href="http://shinobigaiden.forumotion.com/u67" onmouseover="swap(this,'showperson','Kaseki')"></a><img src="http://i.imgur.com/edsiOaN.png" alt="Admin" class="staffavatar" />  <a href="http://shinobigaiden.forumotion.com/u26" onmouseover="swap(this,'showperson','Anubis')"></a><img src="http://i.imgur.com/MM00nNG.png" alt="Admin" class="staffavatar" /><br />  <span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-weight: bold;">MODERATORS<br /></span></span></span>        <a href="http://shinobigaiden.forumotion.com/u28" onmouseover="swap(this,'showperson','Loki')"></a><img src="http://i.imgur.com/7FivWn3.png" alt="Mod" class="staffavatar" />  <a href="http://shinobigaiden.forumotion.com/u123" onmouseover="swap(this,'showperson','Bliss')"></a><img src="http://i.imgur.com/cCzfYtu.png" alt="Mod" class="staffavatar" />  <a href="http://shinobigaiden.forumotion.com/u7" onmouseover="swap(this,'showperson','Akira')"></a><img src="http://i.imgur.com/AYvlK4U.png" alt="Mod" class="staffavatar" />             
</div>

So it's supposed to change the image when you hover over the little icons...

So what do I do?

This is the test forum : http://oneworldrp.forumotion.com/

Which widget is it?

Staff List.

Both of them. The top is the altered one, and the bottom was the original one.

The original code wasn't even working. It looked like you had some extra parentheses closing the function call too early. Try it now :

Code:

<div style="text-align: center;">
        <span style="font-size: 10px;"><br /><img id="showperson" style="border: 0px solid black; width: 135px; height: 300px;" src="http://i.imgur.com/w16HhQL.png" align="middle" border="0" /> <br /></span>
</div><span style="font-size: 10px;"> <br /></span><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",
    'Ryan',
    'http://i.imgur.com/aPc8ASZ.png',
    'Anubis',
    'http://i.imgur.com/qoJ2dfH.png',
    'Kaseki',
    'http://i.imgur.com/EE0kEfm.png',
    'Loki',
    'http://i.imgur.com/u4B5e9l.png',
  'Akira',
    'http://i.imgur.com/LzVJmVX.png',
  'Bliss',
    'http://i.imgur.com/UUGLNB2.png',
  'Umiko-chan',
    'http://i.imgur.com/5p3sgUl.png',
  'Hook',
    'http://i.imgur.com/bkyOxOz.png',
  'Katsuro',
    'http://i.imgur.com/QHxuW9A.png');
    </script>
<div style="text-align: center;">
        <span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-weight: bold;">FOUNDER<br /></span></span></span>
</div><span style="font-size: 10px;"><span style="font-size: x-small;"></span></span>
<div style="text-align: center;">
        <span style="font-size: 10px;"><span style="font-size: x-small;">    <a onmouseover="swap(this,'showperson','Ryan')" href="http://shinobigaiden.forumotion.com/u2"><img class="staffavatar" alt="Ryan" src="http://i.imgur.com/5Ndqftv.png" /></a></span> </span>       
  <div style="text-align: center;">
              <span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-weight: bold;">ADMINISTRATORS<br /></span></span></span>   
  </div><span style="font-size: 10px;"><span style="font-size: x-small;"></span></span>   
  <div style="text-align: center;">
              <span style="font-size: 10px;"><span style="font-size: x-small;">  <a onmouseover="swap(this,'showperson','Kaseki')" href="http://shinobigaiden.forumotion.com/u67"><img class="staffavatar" alt="Admin" src="http://i.imgur.com/edsiOaN.png" /></a></span> </span>  <a onmouseover="swap(this,'showperson','Anubis')" href="http://shinobigaiden.forumotion.com/u26"><img class="staffavatar" alt="Admin" src="http://i.imgur.com/MM00nNG.png" /></a> 
      <div style="text-align: center;">
              <span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-weight: bold;">MODERATORS<br /></span></span></span>
      </div><span style="font-size: 10px;"><span style="font-size: x-small;"></span></span>
      <div style="text-align: center;">
              <span style="font-size: 10px;"><span style="font-size: x-small;">  <a onmouseover="swap(this,'showperson','Loki')" href="http://shinobigaiden.forumotion.com/u28"></a><img class="staffavatar" alt="Mod" src="http://i.imgur.com/7FivWn3.png" />  <a onmouseover="swap(this,'showperson','Bliss')" href="http://shinobigaiden.forumotion.com/u123"></a><img class="staffavatar" alt="Mod" src="http://i.imgur.com/cCzfYtu.png" />  <a onmouseover="swap(this,'showperson','Akira')" href="http://shinobigaiden.forumotion.com/u7"></a><img class="staffavatar" alt="Mod" src="http://i.imgur.com/AYvlK4U.png" />  </span></span>
        <div style="font-size: 10px; text-align: center;">
                  <span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-weight: bold;">DEVELOPERS<br /></span></span></span>
        </div><span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-size: 10px;"></span><span style="font-size: x-small;"></span></span></span>
        <div style="font-size: 10px; text-align: center;">
                  <span style="font-size: 10px;"><span style="font-size: x-small;">  <a onmouseover="swap(this,'showperson','Hook')" href="http://shinobigaiden.forumotion.com/u14"><img class="staffavatar" alt="Dev" src="http://i.imgur.com/upETRW9.png" /></a>  <a onmouseover="swap(this,'showperson','Umiko-chan')" href="http://shinobigaiden.forumotion.com/u4"><img class="staffavatar" alt="Dev" src="http://i.imgur.com/cCzfYtu.png" /></a>  <a onmouseover="swap(this,'showperson','Katsuro')" href="http://shinobigaiden.forumotion.com/u56"><img class="staffavatar" alt="Dev" src="http://i.imgur.com/0Y3Cnsk.png" /></a>      </span></span>
        </div><span style="font-size: 10px;"><span style="font-size: x-small;"></span></span>
      </div>
     
  </div>
</div>

Ange Tuteur wrote:The original code wasn't even working. It looked like you had some extra parentheses closing the function call too early. Try it now :

Code:

<div style="text-align: center;">
        <span style="font-size: 10px;"><br /><img id="showperson" style="border: 0px solid black; width: 135px; height: 300px;" src="http://i.imgur.com/w16HhQL.png" align="middle" border="0" /> <br /></span>
</div><span style="font-size: 10px;"> <br /></span><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",
    'Ryan',
    'http://i.imgur.com/aPc8ASZ.png',
    'Anubis',
    'http://i.imgur.com/qoJ2dfH.png',
    'Kaseki',
    'http://i.imgur.com/EE0kEfm.png',
    'Loki',
    'http://i.imgur.com/u4B5e9l.png',
  'Akira',
    'http://i.imgur.com/LzVJmVX.png',
  'Bliss',
    'http://i.imgur.com/UUGLNB2.png',
  'Umiko-chan',
    'http://i.imgur.com/5p3sgUl.png',
  'Hook',
    'http://i.imgur.com/bkyOxOz.png',
  'Katsuro',
    'http://i.imgur.com/QHxuW9A.png');
    </script>
<div style="text-align: center;">
        <span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-weight: bold;">FOUNDER<br /></span></span></span>
</div><span style="font-size: 10px;"><span style="font-size: x-small;"></span></span>
<div style="text-align: center;">
        <span style="font-size: 10px;"><span style="font-size: x-small;">    <a onmouseover="swap(this,'showperson','Ryan')" href="http://shinobigaiden.forumotion.com/u2"><img class="staffavatar" alt="Ryan" src="http://i.imgur.com/5Ndqftv.png" /></a></span> </span>       
  <div style="text-align: center;">
              <span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-weight: bold;">ADMINISTRATORS<br /></span></span></span>   
  </div><span style="font-size: 10px;"><span style="font-size: x-small;"></span></span>   
  <div style="text-align: center;">
              <span style="font-size: 10px;"><span style="font-size: x-small;">  <a onmouseover="swap(this,'showperson','Kaseki')" href="http://shinobigaiden.forumotion.com/u67"><img class="staffavatar" alt="Admin" src="http://i.imgur.com/edsiOaN.png" /></a></span> </span>  <a onmouseover="swap(this,'showperson','Anubis')" href="http://shinobigaiden.forumotion.com/u26"><img class="staffavatar" alt="Admin" src="http://i.imgur.com/MM00nNG.png" /></a> 
      <div style="text-align: center;">
              <span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-weight: bold;">MODERATORS<br /></span></span></span>
      </div><span style="font-size: 10px;"><span style="font-size: x-small;"></span></span>
      <div style="text-align: center;">
              <span style="font-size: 10px;"><span style="font-size: x-small;">  <a onmouseover="swap(this,'showperson','Loki')" href="http://shinobigaiden.forumotion.com/u28"></a><img class="staffavatar" alt="Mod" src="http://i.imgur.com/7FivWn3.png" />  <a onmouseover="swap(this,'showperson','Bliss')" href="http://shinobigaiden.forumotion.com/u123"></a><img class="staffavatar" alt="Mod" src="http://i.imgur.com/cCzfYtu.png" />  <a onmouseover="swap(this,'showperson','Akira')" href="http://shinobigaiden.forumotion.com/u7"></a><img class="staffavatar" alt="Mod" src="http://i.imgur.com/AYvlK4U.png" />  </span></span>
        <div style="font-size: 10px; text-align: center;">
                  <span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-weight: bold;">DEVELOPERS<br /></span></span></span>
        </div><span style="font-size: 10px;"><span style="font-size: x-small;"><span style="font-size: 10px;"></span><span style="font-size: x-small;"></span></span></span>
        <div style="font-size: 10px; text-align: center;">
                  <span style="font-size: 10px;"><span style="font-size: x-small;">  <a onmouseover="swap(this,'showperson','Hook')" href="http://shinobigaiden.forumotion.com/u14"><img class="staffavatar" alt="Dev" src="http://i.imgur.com/upETRW9.png" /></a>  <a onmouseover="swap(this,'showperson','Umiko-chan')" href="http://shinobigaiden.forumotion.com/u4"><img class="staffavatar" alt="Dev" src="http://i.imgur.com/cCzfYtu.png" /></a>  <a onmouseover="swap(this,'showperson','Katsuro')" href="http://shinobigaiden.forumotion.com/u56"><img class="staffavatar" alt="Dev" src="http://i.imgur.com/0Y3Cnsk.png" /></a>      </span></span>
        </div><span style="font-size: 10px;"><span style="font-size: x-small;"></span></span>
      </div>
     
  </div>
</div>

I uploaded this code, but this also appears to not work. Could the CSS interrupt this widget in any way perhaps? Or is there something to be added as a Javascript or in the CSS?

Try removing the new widget from the page. ( not the one I just gave you, but the old new one ) It creates a new global object, so the one that comes after it will overwrite the old one. I made a test in an HTML page and that worked okay, so I think that might be the problem.

Ange Tuteur wrote:Try removing the new widget from the page. ( not the one I just gave you, but the old new one ) It creates a new global object, so the one that comes after it will overwrite the old one. I made a test in an HTML page and that worked okay, so I think that might be the problem.

You're a godsend.

THANK YOU>

You're welcome ^^

Topic archived