How to add more hover image?

Currently, the code is:

Code:

<img border="0px" align="middle" name="showperson" src="STATIC IMAGE LINK THAT SAYS HOVER IMAGES BELLOW HERE">
</br>
<a onmouseover="swap(this,'showperson','YOUR NAME HERE')" href="YOUR FORUM LINK HERE/u1"><img border="0" alt="Owner" src="YOUR AVATAR HERE"></a>

<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",
'YOUR NAME HERE', 'YOUR AVATAR HERE');
//
</script>


It works fine, but I can only add in hover image. If I wanted to add in more, how would I go about doing that?

Hello,

If you want to add more image on this code segment, try adding this part of the code to how many as you want:

Code:

<br>
<img border="0px" align="middle" name="showperson" src="STATIC IMAGE LINK THAT SAYS HOVER IMAGES BELLOW HERE">
</br>
<a onmouseover="swap(this,'showperson','YOUR NAME HERE')" href="YOUR FORUM LINK HERE/u1"><img border="0" alt="Owner" src="YOUR AVATAR HERE"></a>

Let's say you want 2 hover images, so the code will look like this:

Code:

<img border="0px" align="middle" name="showperson" src="STATIC IMAGE LINK THAT SAYS HOVER IMAGES BELLOW HERE">
</br>
<a onmouseover="swap(this,'showperson','YOUR NAME HERE')" href="YOUR FORUM LINK HERE/u1"><img border="0" alt="Owner" src="YOUR AVATAR HERE"></a>
<!-- First hover image -->

<br>
<img border="0px" align="middle" name="showperson" src="STATIC IMAGE LINK THAT SAYS HOVER IMAGES BELLOW HERE">
</br>
<a onmouseover="swap(this,'showperson','YOUR NAME HERE')" href="YOUR FORUM LINK HERE/u1"><img border="0" alt="Owner" src="YOUR AVATAR HERE"></a>
<!-- Second hover image -->

<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",
'YOUR NAME HERE', 'YOUR AVATAR HERE');
//
</script>

See if it will work.

It didn't work

Bump?

Hi

By adding another ID/Name . Because if you add more images to it, the images won't work or will work on the one with the original ID/Name .

If you wish to create a new ID/Name, just copy paste some of the fragments of the code and change its name.

For example: You have 'showperson' there, right? Please copy paste the script code for showperson and then change 'showperson' to some other name, like 'cough' or something .

Regards,
Pizza Boi

Can you give me an example of what I would have to do if I wanted two or three images?

Hi

This is an example:

Script Code -

Code:

1st code:

<script type="text/javascript">
setswap("showperson",
'YOUR NAME HERE', 'YOUR AVATAR HERE');
//
</script>

2nd code:

<script type="text/javascript">
setswap("showperson2",
'YOUR NAME HERE', 'YOUR AVATAR HERE');
//
</script>

HTML Code -

Code:

1st code: <img border="0px" align="middle" name="showperson" src="STATIC IMAGE LINK THAT SAYS HOVER IMAGES BELLOW HERE">
</br>
<a onmouseover="swap(this,'showperson','YOUR NAME HERE')" href="YOUR FORUM LINK HERE/u1"><img border="0" alt="Owner" src="YOUR AVATAR HERE"></a>

2nd code:

<img border="0px" align="middle" name="showperson2" src="STATIC IMAGE LINK THAT SAYS HOVER IMAGES BELLOW HERE">
</br>
<a onmouseover="swap(this,'showperson2','YOUR NAME HERE')" href="YOUR FORUM LINK HERE/u1"><img border="0" alt="Owner" src="YOUR AVATAR HERE"></a>

Also, I believe I've seen this code before. Do you mind linking me to a topic you found this from? If my gut instinct's right, Nera was the one who managed to solve this problem.

Hope you can be helped!

Regards,
Pizza Boi

I wasn't able to put it in. Can you show me the entire code?

I got the code from here. https://help.forumotion.com/t97887-staff-widget-with-hovering-swamp-images-effect

Hi

I told you what to do already... anyway. Here:

Code:



<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",
'YOUR NAME HERE', 'YOUR AVATAR HERE');
//
setswap("showperson2",
'YOUR NAME HERE', 'YOUR AVATAR HERE');
//
</script>
<body>
<img border="0px" align="middle" name="showperson" src="STATIC IMAGE LINK THAT SAYS HOVER IMAGES BELLOW HERE">
</br>
<a onmouseover="swap(this,'showperson','YOUR NAME HERE')" href="YOUR FORUM LINK HERE/u1"><img border="0" alt="Owner" src="YOUR AVATAR HERE"></a>
<img border="0px" align="middle" name="showperson2" src="STATIC IMAGE LINK THAT SAYS HOVER IMAGES BELLOW HERE">
</br>
<a onmouseover="swap(this,'showperson2','YOUR NAME HERE')" href="YOUR FORUM LINK HERE/u1"><img border="0" alt="Owner" src="YOUR AVATAR HERE"></a></body>

If the above code doesn't work, please provide me with an admin test account and let me see if I can make it work.

Regards,
Pizza Boi

Didn't work at all.

Hi

I read through the topic and it seems that the volunteer inputted more than enough codes for this to work:

Code 1:

Code:

<img width="115px" height="115px" border="1" align="middle" name="showperson" style="border: 1px
black solid;" src="STATIC IMAGE GOES HERE, THE ONE THAT WILL DISPLAY PICTURES WHEN YOU HOVER OVER THEM">

SCRIPT FROM THE LINK GOES HERE - The big one from the link I gave you.

<script type="text/javascript">
setswap("showperson",
'NAME OF THE PERSON 1 GOES HERE',
'AVATAR OF THE PERSON 1 GOES HERE',
'NAME OF THE PERSON 2 GOES HERE',
'AVATAR OF THE PERSON 2 GOES HERE');
//
</script>

<a onmouseover="swap(this,'showperson','NAME OF THE PERSON 1 GOES HERE')" href="YOUR FORUM URL HERE/u1"><img border="0" alt="TITLE OF THE IMAGE" style="border: 1px
black solid; height: 62px; width: 26px;" src="AVATAR OF THE PERSON 1 GOES HERE"></a>

<a onmouseover="swap(this,'showperson','NAME OF THE PERSON 2 GOES HERE')" href="YOUR FORUM URL HERE/u2"><img border="0" alt="TITLE OF THE IMAGE" style="border: 1px black solid;" src="AVATAR OF THE PERSON 2 GOES HERE"></a>


Code 2: With links -

Code:

<img width="115px" height="115px" border="1" align="middle" name="showperson" style="border: 1px
black solid;" src="http://www.ribbons2go.com/images/5771-vertical-flat-staff-ribbon.jpg">

<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",
'Sato',
'http://www.apexwallpapers.com/wp-content/uploads/2010/11/sasuke-4-115x115.jpg',
'Shi',
'http://www.naruto-arena.com/images/avatars/uploaded/2617987.jpg');
//
</script>
</br>
</br>
<a onmouseover="swap(this,'showperson','Sato')" href="http://n-b-s.forumotions.net/u3"><img border="1" alt="Owner" style="border: 1px black solid; height: 62px; width: 26px;" src="http://www.apexwallpapers.com/wp-content/uploads/2010/11/sasuke-4-115x115.jpg"></a>


<a onmouseover="swap(this,'showperson','Shi')" href="http://n-b-s.forumotions.net/u3"><img border="1" alt="Owner" style="border: 1px black solid; height: 62px; width: 26px;" src="http://www.naruto-arena.com/images/avatars/uploaded/2617987.jpg"></a>

If you cannot understand why the links are replaced as such, please read the ORIGINAL tutorial for this found here: http://www.idocs.com/tags/images/images_famsupp_84.html

Regards,
Pizza Boi

So do I put in both codes or just one?

Hi

The second one. Please MODIFY it correctly and according to where you should put where since it's been provided already.

Regards,
Pizza Boi