Why is my Hover Over Code not working?

So I can't figure it out I think I did everything correctly so why isn't it working?

Code:

<img id="showperson" src="http://i.imgur.com/8WuV5qD.png" style="border: 1px solid black; width: 290px; height: 262px;" align="middle" border="1" /> <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",
‘Bacon',
'http://i.imgur.com/D4yVP3i.png',
‘Ryoshi',
'http://i.imgur.com/flj5bey.png',
’Fujin',
'http://i.imgur.com/leFLjPL.png',
’Sora',
'http://i.imgur.com/fK0n9Od.png',
‘Zed',
'http://i.imgur.com/9CkDRBq.png',
‘Mizuko',
'http://i.imgur.com/vPAqMW9.png',
‘Kosovo',
'http://i.imgur.com/pQMO0bt.png',
‘Ean',
'http://i.imgur.com/SlNsIKY.png',
’Sun',
'http://i.imgur.com/FzUVJXl.png');
//
</script>
<div align="center">
   <img src="http://i.imgur.com/TRXTy4r.png" />
</div>
   
<div align="center">
   <a href="http://fairytailonline-rp.forumotion.com/u1" onmouseover="swap(this,'showperson','Bacon')"><img src="http://i.imgur.com/hERepgP.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Owner" border="1" /></a>
</div>
 
<div align="center">
                           <img src="http://i.imgur.com/qmWo70a.png" />
</div>
 
<div align="center">
    <a href="http://fairytailonline-rp.forumotion.com/u19" onmouseover="swap(this,'showperson','Ryoshi')"><img src="http://i.imgur.com/8cKj49r.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Head Admin" border="1" /></a>  <a href="http://fairytailonline-rp.forumotion.com/u21" onmouseover="swap(this,'showperson','Fujin')"><img src="http://i.imgur.com/spEUadS.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Admin" border="1" /></a>  <a href="http://fairytailonline-rp.forumotion.com/u5" onmouseover="swap(this,'showperson','Sora')"><img src="http://i.imgur.com/lCkQ8Y7.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Admin" border="1" /></a>  <a href="http://fairytailonline-rp.forumotion.com/u27" onmouseover="swap(this,'showperson','Zed')"><img src="http://i.imgur.com/GH77H3j.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Admin-Coder-Designer" border="1" /></a>  <a href="http://fairytailonline-rp.forumotion.com/u23" onmouseover="swap(this,'showperson','Mizuko')"><img src="http://i.imgur.com/SHRSmkx.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Admin-Coder-Designer2" border="1" /></a>
</div>
 
<div align="center">
                     <img src="http://i.imgur.com/Al93sf3.png" />
</div>
 
<div align="center">
    <a href="http://fairytailonline-rp.forumotion.com/u16" onmouseover="swap(this,'showperson','Kosovo')"><img src="http://i.imgur.com/KaGw7oj.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Head Moderator" border="1" /></a>
</div>
 
<div align="center">
                     <img src="http://i.imgur.com/ftk2KId.png" />
</div>
 
<div align="center">
    <a href="http://fairytailonline-rp.forumotion.com/u9" onmouseover="swap(this,'showperson','Ean')"><img src="http://i.imgur.com/eVz3txJ.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Development-Team" border="1" /></a>  <a href="http://fairytailonline-rp.forumotion.com/u25" onmouseover="swap(this,'showperson','Sun')"><img src="http://i.imgur.com/vt0w8EX.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Development-Team" border="1" /></a>
</div>

Where are you adding this code?

The widget

Could you post the link where you see this?

I do not see that widget on that forum.

hover your mouse to the left the widget is there.

So what hover effect is not working?

when hovering over the icons the main image that says Staff list should turn into another picture based on the picture icon I.E hover over this image or Icon



In place of Staff List should be this

Hey Zed,

On the names you had the wrong type of quote before. It should be the same type of quote to start and end a string. e.g. 'string' but in your case it was ‘string'

Here's the fixed code :

Code:

<img id="showperson" src="http://i.imgur.com/8WuV5qD.png" style="border: 1px solid black; width: 290px; height: 262px;" align="middle" border="1" /> <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",
'Bacon',
'http://i.imgur.com/D4yVP3i.png',
'Ryoshi',
'http://i.imgur.com/flj5bey.png',
'Fujin',
'http://i.imgur.com/leFLjPL.png',
'Sora',
'http://i.imgur.com/fK0n9Od.png',
'Zed',
'http://i.imgur.com/9CkDRBq.png',
'Mizuko',
'http://i.imgur.com/vPAqMW9.png',
'Kosovo',
'http://i.imgur.com/pQMO0bt.png',
'Ean',
'http://i.imgur.com/SlNsIKY.png',
'Sun',
'http://i.imgur.com/FzUVJXl.png');
//
</script>
<div align="center">
  <img src="http://i.imgur.com/TRXTy4r.png" />
</div>
   
<div align="center">
  <a href="http://fairytailonline-rp.forumotion.com/u1" onmouseover="swap(this,'showperson','Bacon')"><img src="http://i.imgur.com/hERepgP.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Owner" border="1" /></a>
</div>
 
<div align="center">
                          <img src="http://i.imgur.com/qmWo70a.png" />
</div>
 
<div align="center">
    <a href="http://fairytailonline-rp.forumotion.com/u19" onmouseover="swap(this,'showperson','Ryoshi')"><img src="http://i.imgur.com/8cKj49r.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Head Admin" border="1" /></a>  <a href="http://fairytailonline-rp.forumotion.com/u21" onmouseover="swap(this,'showperson','Fujin')"><img src="http://i.imgur.com/spEUadS.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Admin" border="1" /></a>  <a href="http://fairytailonline-rp.forumotion.com/u5" onmouseover="swap(this,'showperson','Sora')"><img src="http://i.imgur.com/lCkQ8Y7.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Admin" border="1" /></a>  <a href="http://fairytailonline-rp.forumotion.com/u27" onmouseover="swap(this,'showperson','Zed')"><img src="http://i.imgur.com/GH77H3j.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Admin-Coder-Designer" border="1" /></a>  <a href="http://fairytailonline-rp.forumotion.com/u23" onmouseover="swap(this,'showperson','Mizuko')"><img src="http://i.imgur.com/SHRSmkx.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Admin-Coder-Designer2" border="1" /></a>
</div>
 
<div align="center">
                    <img src="http://i.imgur.com/Al93sf3.png" />
</div>
 
<div align="center">
    <a href="http://fairytailonline-rp.forumotion.com/u16" onmouseover="swap(this,'showperson','Kosovo')"><img src="http://i.imgur.com/KaGw7oj.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Head Moderator" border="1" /></a>
</div>
 
<div align="center">
                    <img src="http://i.imgur.com/ftk2KId.png" />
</div>
 
<div align="center">
    <a href="http://fairytailonline-rp.forumotion.com/u9" onmouseover="swap(this,'showperson','Ean')"><img src="http://i.imgur.com/eVz3txJ.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Development-Team" border="1" /></a>  <a href="http://fairytailonline-rp.forumotion.com/u25" onmouseover="swap(this,'showperson','Sun')"><img src="http://i.imgur.com/vt0w8EX.png" style="border: 0px White solid; height: 71px; width: 75px;" alt="Development-Team" border="1" /></a>
</div>

THANK YOU!

You're welcome.

Topic archived

Have a nice day. ^^