Staff widget with hovering + swamp images effect
5 posters
Page 1 of 1
Staff widget with hovering + swamp images effect
Hey can someone tell me how to add this Staff widget ?
and when i put my mouse over the image it shows this.
how do i do that ?
and when i put my mouse over the image it shows this.
how do i do that ?
Re: Staff widget with hovering + swamp images effect
Hi,
Make a forum widget.
AP > Modules > Forum Widget managment > Create a new widget.
Drag it with the mouse in the structure. Add this code in it. Replace the things in it I wrote in upercase.
Customize the rest of the widget, this is for the image on mouse change/over if that's what you wanted.
Make a forum widget.
AP > Modules > Forum Widget managment > Create a new widget.
Drag it with the mouse in the structure. Add this code in it. Replace the things in it I wrote in upercase.
- Code:
<a href="" onMouseOver="document.MyImage.src='IMAGE TO APPEARE ON HOVER GOES HERE';" onMouseOut="document.MyImage.src='FIRST IMAGE GOES HERE';">
<img src="FIRST IMAGE GOES HERE" name="MyImage">
</a>
Customize the rest of the widget, this is for the image on mouse change/over if that's what you wanted.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Staff widget with hovering + swamp images effect
half is correct. heres the link to the site.
http://narutold.forumotion.com/
i want that hover mod if you can help me
http://narutold.forumotion.com/
i want that hover mod if you can help me
Re: Staff widget with hovering + swamp images effect
Sorry to budge in but, I'm having the same problem but no one answers me properly. Nera, you wrote 'first image goes here' twice? But which? Like the pic to hover over to show the name?
Re: Staff widget with hovering + swamp images effect
They used this http://www.idocs.com/tags/images/images_famsupp_84.html
Example (touch the piano man): http://movingagain.forumcroatian.com/h6-swamp
Example is to show you that I have done it like that and it works fine, have tried it in the widget also. It's a test HTML page.
Add this to a widget. Fill in the blanks.
@Tobii The one that will be showen first when you land on forum. Add it for test purpuses and see what happens, it's the easiest to understand like that.
Example (touch the piano man): http://movingagain.forumcroatian.com/h6-swamp
Example is to show you that I have done it like that and it works fine, have tried it in the widget also. It's a test HTML page.
Add this to a widget. Fill in the blanks.
<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>
ADD THE WHOLE SCRIPT FROM THE LINK HERE
<script type="text/javascript">
setswap("showperson",
'YOUR NAME HERE', 'YOUR AVATAR HERE');
//
</script>
@Tobii The one that will be showen first when you land on forum. Add it for test purpuses and see what happens, it's the easiest to understand like that.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Staff widget with hovering + swamp images effect
Sorry for posting this solved problem but I got the same thing here. I did try the code but seems that it only shows the static image and the avatar. But when I tried to hover the mouse towards the avatar, the static image remains the same.
Yu Narukami- Forumember
- Posts : 49
Reputation : 1
Language : English
Re: Staff widget with hovering + swamp images effect
Can I have a link to where you have done it?
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Staff widget with hovering + swamp images effect
http://narutoforbidden2.forumms.net/
PS-The pic is just a tester
- Code:
<img border="0px" align="middle" name="showperson" src="http://img847.imageshack.us/img847/6791/stafftemplateb.png">
</br>
<a onmouseover="swap(this,'showperson','Minato')" href="http://narutoshinobiwars.forumms.net//u1"><img border="0" alt="Owner" src="http://img31.imageshack.us/img31/5074/celtia.png"></a> <script type="text/javascript">
setswap("showperson",
'Minato', 'http://img31.imageshack.us/img31/5074/celtia.png');
//
</script>
PS-The pic is just a tester
Yu Narukami- Forumember
- Posts : 49
Reputation : 1
Language : English
Re: Staff widget with hovering + swamp images effect
You did not follow this step.
- Code:
ADD THE WHOLE SCRIPT FROM THE LINK HERE.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Staff widget with hovering + swamp images effect
what script?
- Code:
<a href="" onMouseOver="document.MyImage.src='IMAGE TO APPEARE ON HOVER GOES HERE';" onMouseOut="document.MyImage.src='FIRST IMAGE GOES HERE';">
<img src="FIRST IMAGE GOES HERE" name="MyImage">
</a>
Yu Narukami- Forumember
- Posts : 49
Reputation : 1
Language : English
Re: Staff widget with hovering + swamp images effect
This is the answer you need. Not the one up.
Nera. wrote:They used this http://www.idocs.com/tags/images/images_famsupp_84.html
Example (touch the piano man): http://movingagain.forumcroatian.com/h6-swamp
Example is to show you that I have done it like that and it works fine, have tried it in the widget also. It's a test HTML page.
Add this to a widget. Fill in the blanks.
<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>
ADD THE WHOLE SCRIPT FROM THE LINK HERE
<script type="text/javascript">
setswap("showperson",
'YOUR NAME HERE', 'YOUR AVATAR HERE');
//
</script>
@Tobii The one that will be showen first when you land on forum. Add it for test purpuses and see what happens, it's the easiest to understand like that.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Staff widget with hovering + swamp images effect
Is there a video tutorial? Its so confusing.
Yu Narukami- Forumember
- Posts : 49
Reputation : 1
Language : English
Re: Staff widget with hovering + swamp images effect
No there is not. It's actually simple. All you did not do as I said s this step bolded in my answer.
ADD THE WHOLE SCRIPT FROM THE LINK HERE.
When I said the script from the link I ment it basiclly. Add the whole script from this link ( http://www.idocs.com/tags/images/images_famsupp_84.html ) there.
ADD THE WHOLE SCRIPT FROM THE LINK HERE.
When I said the script from the link I ment it basiclly. Add the whole script from this link ( http://www.idocs.com/tags/images/images_famsupp_84.html ) there.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Staff widget with hovering + swamp images effect
So simply I just add the script there and do nothing more?
EDIT:How to add more pics?
EDIT:How to add more pics?
Yu Narukami- Forumember
- Posts : 49
Reputation : 1
Language : English
Re: Staff widget with hovering + swamp images effect
http://www.idocs.com/tags/images/images_famsupp_82.html
See there, you just have to fill it and you'll have more pictures. Replace this
With the one from the link in this post. And fill it to get more pictures. I'm sorry if I explain badly, I'm not a good English speaker.
See there, you just have to fill it and you'll have more pictures. Replace this
- Code:
<script type="text/javascript">
setswap("showperson",
'YOUR NAME HERE', 'YOUR AVATAR HERE');
//
</script>
With the one from the link in this post. And fill it to get more pictures. I'm sorry if I explain badly, I'm not a good English speaker.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Staff widget with hovering + swamp images effect
How? I got the 1st one right but the 2nd one wrong
Yu Narukami- Forumember
- Posts : 49
Reputation : 1
Language : English
Re: Staff widget with hovering + swamp images effect
Example of how does it have to look for two people
<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>
http://movingagain.forumcroatian.com/h6-swamp
To do it on more persons just add all that you have for person 1 & 2 for others in the script.
Script:
<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>
Done on two persons example:
http://movingagain.forumcroatian.com/h6-swamp
To do it on more persons just add all that you have for person 1 & 2 for others in the script.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Staff widget with hovering + swamp images effect
Hello Yu Narukami
When you say: "2nd one wrong" do you mean your placing two or more on same webpage?
If you have more than one rollover on the same web page, you must use a different name value for each one. Using the same name value for two or more will confuse the browser and no effect will be seen.
Love
Liz
Update:
The first image will be placed on the page as it normally would. The one main difference is you have to specify a name in the img tag like so...
<img src="image1.gif" name="MyImage">
This image can now be accessed by javascript as document.MyImage. Of course add in the width, height, alt, and border properties as desired too.
The next part is to create a link around that image. This will allow javascript to affect the image properties.
<a href="" onMouseOver="document.MyImage.src='image2.gif';" onMouseOut="document.MyImage.src='image1.gif';">
<img src="image1.gif" name="MyImage"></a>
SRC is the SouRCe of the image file.
document.MyImage.src specifies that something is happening to the src of the object named MyImage on this document (web page). Remember... JavaScript is a step language. It goes level by level to find and use something.
OnMouseOver and OnMouseOut are self explanitory. They will do this specified coding when this event happens. For the example, They are being used to specify a new src for the named image.
This type of rollover effect is very common for navigation uses. You can create two images being close to the same. One image may have regular text on it, the other having highlighted text. Put them together in a rollover effect and you have a neat navigation happening. Placing a value in the href will complete the navigation effect.
When you say: "2nd one wrong" do you mean your placing two or more on same webpage?
If you have more than one rollover on the same web page, you must use a different name value for each one. Using the same name value for two or more will confuse the browser and no effect will be seen.
Love
Liz
Update:
The first image will be placed on the page as it normally would. The one main difference is you have to specify a name in the img tag like so...
<img src="image1.gif" name="MyImage">
This image can now be accessed by javascript as document.MyImage. Of course add in the width, height, alt, and border properties as desired too.
The next part is to create a link around that image. This will allow javascript to affect the image properties.
<a href="" onMouseOver="document.MyImage.src='image2.gif';" onMouseOut="document.MyImage.src='image1.gif';">
<img src="image1.gif" name="MyImage"></a>
SRC is the SouRCe of the image file.
document.MyImage.src specifies that something is happening to the src of the object named MyImage on this document (web page). Remember... JavaScript is a step language. It goes level by level to find and use something.
OnMouseOver and OnMouseOut are self explanitory. They will do this specified coding when this event happens. For the example, They are being used to specify a new src for the named image.
This type of rollover effect is very common for navigation uses. You can create two images being close to the same. One image may have regular text on it, the other having highlighted text. Put them together in a rollover effect and you have a neat navigation happening. Placing a value in the href will complete the navigation effect.
True Blue- Forumember
- Posts : 63
Reputation : 4
Language : english
Location : N.Ireland
Re: Staff widget with hovering + swamp images effect
What? So confusing
Yu Narukami- Forumember
- Posts : 49
Reputation : 1
Language : English
Re: Staff widget with hovering + swamp images effect
Just fill in the thigs I posted you in color in my previous post. That's all you need to do. See, I've done it here http://movingagain.forumcroatian.com/h6-swamp
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Staff widget with hovering + swamp images effect
How to make the pics go down and not sideways.
Yu Narukami- Forumember
- Posts : 49
Reputation : 1
Language : English
Re: Staff widget with hovering + swamp images effect
Add a </br> tag after the first picture.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Staff widget with hovering + swamp images effect
what? Only the first pic then the others will go sideways.
Yu Narukami- Forumember
- Posts : 49
Reputation : 1
Language : English
Re: Staff widget with hovering + swamp images effect
- Code:
<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>
- Code:
<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>
Add it like I did here. The more </br> you add the spacing will be bigger and they'll go down not sideways.
Example: http://movingagain.forumcroatian.com/h6-swamp
To make only the first picture go down add it only before the first picture.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Staff widget with hovering + swamp images effect
Just give some title to the image, like moderator or whatever.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Staff widget with hovering + swamp images effect
The image title is not showing ? can you fix it
<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>
<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','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>
<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>
<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','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>
Re: Staff widget with hovering + swamp images effect
You did not fill in the last part for the second one. But OK, here you go
And how it looks:
http://movingagain.forumcroatian.com/h8-test
Cheers
Edit: I did not read the question correctly.
ALT, which is required, is used for replacement content in cases where the image is not displayed (such as text-mode browsers, audio readers, images unable to load, etc.). TITLE, which is optional, is used for supplementary information, such as to display as a tooltip.
So in order to have it displayed you must use title not alt.
- 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>
And how it looks:
http://movingagain.forumcroatian.com/h8-test
Cheers
Edit: I did not read the question correctly.
ALT, which is required, is used for replacement content in cases where the image is not displayed (such as text-mode browsers, audio readers, images unable to load, etc.). TITLE, which is optional, is used for supplementary information, such as to display as a tooltip.
So in order to have it displayed you must use title not alt.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Staff widget with hovering + swamp images effect
Welcome.
I'll leave the topic open for Yu Narukami & Tobi if they have any problems
I'll leave the topic open for Yu Narukami & Tobi if they have any problems
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Similar topics
» How do I get the same effect on my forum as when hovering this forum's navigation bar?
» loading effect on spoiler images
» Fade-IN Effect of images
» blurry effect for images?
» Lightbox Effect to Images
» loading effect on spoiler images
» Fade-IN Effect of images
» blurry effect for images?
» Lightbox Effect to Images
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum