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.

How to add more hover image?

View previous topic View next topic Go down

In progress How to add more hover image?

Post by jarn on February 16th 2014, 9:37 pm

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?

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

In progress Re: How to add more hover image?

Post by Jophy on February 18th 2014, 4:43 am

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.

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

In progress Re: How to add more hover image?

Post by jarn on February 18th 2014, 7:47 pm

It didn't work Sad

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

In progress Re: How to add more hover image?

Post by jarn on February 25th 2014, 6:10 pm

Bump?

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

In progress Re: How to add more hover image?

Post by Pizza Boi on February 25th 2014, 6:16 pm

Hi Very Happy

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

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

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

In progress Re: How to add more hover image?

Post by jarn on February 25th 2014, 9:11 pm

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

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

In progress Re: How to add more hover image?

Post by Pizza Boi on February 25th 2014, 9:23 pm

Hi Very Happy

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

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

In progress Re: How to add more hover image?

Post by jarn on February 25th 2014, 10:59 pm

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

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

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

In progress Re: How to add more hover image?

Post by Pizza Boi on February 25th 2014, 11:20 pm

Hi Very Happy

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

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

In progress Re: How to add more hover image?

Post by jarn on February 26th 2014, 12:00 am

Didn't work at all.

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

In progress Re: How to add more hover image?

Post by Pizza Boi on February 26th 2014, 9:04 pm

Hi Very Happy

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

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

In progress Re: How to add more hover image?

Post by jarn on February 28th 2014, 6:37 pm

So do I put in both codes or just one?

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

In progress Re: How to add more hover image?

Post by Pizza Boi on March 1st 2014, 12:47 am

Hi Very Happy

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

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.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