Hover over code
3 posters
Page 1 of 1
Hover over code
I'm having problems finding a code, not just your average rollover code but one that allows you to hover over an image and then a box comes up with another image. I found the one at the link below, but it's telling me that I need to download files that the script needs to reference, I have no idea how to do this or if it's even possible using forumotion.
http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm
Can someone help?
http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm
Can someone help?
LasTemptation- Forumember
- Posts : 50
Reputation : 0
Language : English
Location : United States
Re: Hover over code
do you want it to be the same image over every image hover?
i dont see anything you have to download, but this looks like something more for creating custom pages, not something to add like css that will do a auto hover for the whole site?
Please explain more on where you want this incorporated, and if it would be different images or all the same images/hover.
i dont see anything you have to download, but this looks like something more for creating custom pages, not something to add like css that will do a auto hover for the whole site?
Please explain more on where you want this incorporated, and if it would be different images or all the same images/hover.
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: Hover over code
I want to incorporate this onto a widget that lists the staff of the forum, and when you hover over an image another comes up. I actually figured out how to do what I wanted but now I'm having a different problem.
Here's the code:
- Spoiler:
Here's the code:
- Code:
<style type="text/css">
#popitmenu{
position: absolute;
background-color: white;
border: 0px solid black;
font: normal 12px Verdana;
line-height: 0px;
z-index: 100;
visibility: hidden;
}
#popitmenu a{
text-decoration: none;
padding-left: 0px;
color: black;
display: block;
}
#popitmenu a:hover{ /*hover background color*/
background-color: #CCFF9D;
}
</style>
<script type="text/javascript">
/***********************************************
* Pop-it menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var defaultMenuWidth="125px" //set default menu width.
var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT
linkset[0]='<a href="http://heroes.forummotion.com/u3"><img src="http://i52.tinypic.com/n63m75.gif"></a>'
////No need to edit beyond here
var ie5=document.all && !window.opera
var ns6=document.getElementById
if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')
function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}
function showmenu(e, which, optWidth){
if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}
function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}
function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}
function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}
function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}
if (ie5||ns6)
document.onclick=hidemenu
</script>
<a href="http://heroes.forummotion.com/u3" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()"><img src=http://i51.tinypic.com/153kv0g.png></a><br>
</center>
LasTemptation- Forumember
- Posts : 50
Reputation : 0
Language : English
Location : United States
Re: Hover over code
oh, looks like it can be in a few different places in the code.
Honestly i would not even use this code, you can find better.
Or if you like send me he list and images and i can make you a better code.
I would do a list with a scroll up and stop on mouse over along with the pop-up image being click-able to go to the persons profile page. But thats just me.. I know you can find better and easier codes out there to use.
Other then that , man it will take me some time to see where you adjust this code. Once again looks as if it can be in a few different places?
Honestly i would not even use this code, you can find better.
Or if you like send me he list and images and i can make you a better code.
I would do a list with a scroll up and stop on mouse over along with the pop-up image being click-able to go to the persons profile page. But thats just me.. I know you can find better and easier codes out there to use.
Other then that , man it will take me some time to see where you adjust this code. Once again looks as if it can be in a few different places?
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: Hover over code
Oh that would be great if you could make me a better code like the one you've suggested. The problem is I haven't finished any of the other images yet. Could you still make it and then I'll add in the rest once it's finished?
LasTemptation- Forumember
- Posts : 50
Reputation : 0
Language : English
Location : United States
Re: Hover over code
well i would need at least one starting image, thats the main one showing before the mouse over,
then give me the one mouse over image.
and you have to let me know how many staff members your going to have in the list.
and then i will post a example on how it will look and work.
And you want this in a widget right. be sure your starting image is the right dimensions and dose not move the widget out of alignment
then give me the one mouse over image.
and you have to let me know how many staff members your going to have in the list.
and then i will post a example on how it will look and work.
And you want this in a widget right. be sure your starting image is the right dimensions and dose not move the widget out of alignment
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: Hover over code
Starter image - https://2img.net/h/oi51.tinypic.com/153kv0g.png
Mouse over image - https://2img.net/h/oi52.tinypic.com/n63m75.gif
There are five staff members total, and yeah it's going to be in a widget. Thank you so much for your help.
Mouse over image - https://2img.net/h/oi52.tinypic.com/n63m75.gif
There are five staff members total, and yeah it's going to be in a widget. Thank you so much for your help.
LasTemptation- Forumember
- Posts : 50
Reputation : 0
Language : English
Location : United States
Re: Hover over code
Ok ,
Looks like will need the other images, and links going to the individual staff profile link
(if you want to add them?)
here is an example, once the other images are in with it's own mouse over images it will open/mouse over separate.The reason it is not doing it in this example is because it's all the same code, i just repeated it in the list to give you a demo.
Top widget left hand side.
http://evolymrobynb.forumotion.net/forum
Looks like will need the other images, and links going to the individual staff profile link
(if you want to add them?)
here is an example, once the other images are in with it's own mouse over images it will open/mouse over separate.The reason it is not doing it in this example is because it's all the same code, i just repeated it in the list to give you a demo.
Top widget left hand side.
http://evolymrobynb.forumotion.net/forum
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: Hover over code
I don't have those images finished yet because I'm still waiting for everyone to send me what they want up. I think if you just sent me the code with the one staff member I'll be able to figure out how to add the rest myself once I have it finished.
LasTemptation- Forumember
- Posts : 50
Reputation : 0
Language : English
Location : United States
Re: Hover over code
i can try but not sure if it will work correctly becuase i am using software to generate each image/mouse-over code, there is a separate part of the code that has to go in the <head> section of the overall html code. then another in the <body> part of the html code.
so i can try to generate them single like you are saying and see if it works when you add your own links to them. If not i think i have something else that you can set up easy too, i just have to find it.
so i can try to generate them single like you are saying and see if it works when you add your own links to them. If not i think i have something else that you can set up easy too, i just have to find it.
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: Hover over code
Alright yeah lets just see if it works when I try to add them in and then I'll let you know if it doesn't.
LasTemptation- Forumember
- Posts : 50
Reputation : 0
Language : English
Location : United States
Re: Hover over code
If you got own homepage u could use this
http://www.dynamicdrive.com/dynamicindex5/stickytooltip_dev.htm
http://www.dynamicdrive.com/dynamicindex5/stickytooltip_dev.htm
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum