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?

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

Spoiler:

You'll notice there's a huge gap in between the original image and the popup image, I was wondering if there's any way to make them closer together?

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>

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?

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?

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

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.

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

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.

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.

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.

If you got own homepage u could use this
http://www.dynamicdrive.com/dynamicindex5/stickytooltip_dev.htm