javascript positioning

[scushkadee]

hi, i'm working off of a script found on this website.
it allows a user to click a link, and then have a image pulled up.

I need to be able to change the positioning of that image that is pulled up.
Currently it is centered.
I know nothing about javascript.
here is the part of the code that i believe is where the positioning is controlled.

centerDiv:function(divobj){ //Centers a div element on the page
var ie=document.all && !window.opera
var dom=document.getElementById
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth
var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document
var objwidth=divobj.offsetWidth //width of div element
var objheight=divobj.offsetHeight //height of div element
var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px" //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
divobj.style.left=docwidth/2-objwidth/2+"px" //Center div element horizontally
divobj.style.top=Math.floor(parseInt(topposition))+"px"
divobj.style.visibility="visible"
},

[evan]

Not much of a javascript guy but I'll share an idea I'm also trying to get to work maybe it will help, maybe someone will throw me a line about what I can't get to work.

I am using a simple javascript like this:

<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>

then I have

Links:

<p onClick="showmenu('about1')" onMouseOut="hidemenu('about1')"> About</p>

<p onClick="showmenu('contact2')" onMouseOut="hidemenu('contact2')"> Contact Us</p>

<p onClick="showmenu('account3')" onMouseOut="hidemenu('account3')"> My Account</p>


Then these <divs>

<div id="about1">this will contain information about the company</div>
<div id="contact2">this will contain support information and contact information</div>
<div id="account3">this is an intro to how account management works</div>



then the CSS:

<style>
body{font-family:arial;}

p{color:black;text-decoration:underline;font:bold}
p:hover{color:#606060}

#about1{
font-size:100%;
position:absolute;
left:200px;
top: 20px;
color:black;
background:#7ac7f3;
z-index:10;
visibility: hidden;
}

#contact2{
font-size:100%;
position:absolute;
left:250px;
top: 20px;
color:black;
background:#7ac7f3;
z-index:12;
visibility: hidden;
}

#account3{
font-size:100%;
position:absolute;
left:300px;
top: 20px;
color:black;
background:#7ac7f3;
z-index:14;
visibility: hidden;
}

</style>

What I did was use divs and css to place the links.

This works well except (my javascript limited at this point)
I want my content to swap more easily -

OnClick I use to display the <div>
OnMouseOut I use to hide it.

That's neat but I want it to stay put until I click another link.
I tried this:
<p onClick="showmenu('contact2')" ,"hidemenu(about1,account3)" > Contact Us</p>

and getting rid of the "OnMouseOut" for the other two

but I know I did that wronge!

-So close!