Javascript Popup situation

programming web dev
1

Ive been working with this code to get a info-pic to pop up on my site.
Thing is the default settings of the code is that the popup posts itself directly to the bottom of the linked text/image.
What i would like to know is if any of you can pinpoint what id need to change to get the popup to pop to the right and be centered on the page.

<SCRIPT TYPE="text/javascript"><!--
/* Script by: [www.jtricks.com](http://www.jtricks.com)
 * Version: 20060314
 * Latest version:
 * [www.jtricks.com/javascript/window/box.html](http://www.jtricks.com/javascript/window/box.html)
 */
// Moves the box object to be directly beneath an object.
function move_box(an, box)
{
    var cleft = 0;
    var ctop = 0;
    var obj = an;
 
    while (obj.offsetParent)
    {
        cleft += obj.offsetLeft;
        ctop += obj.offsetTop;
        obj = obj.offsetParent;
    }
 
    box.style.left = cleft + 'px';
 
    ctop += an.offsetHeight + 8;
 
    // Handle Internet Explorer body margins,
    // which affect normal document, but not
    // absolute-positioned stuff.
    if (document.body.currentStyle &&
        document.body.currentStyle['marginTop'])
    {
        ctop += parseInt(
            document.body.currentStyle['marginTop']);
    }
 
    box.style.top = ctop + 'px';
}
 
// Shows a box if it wasn't shown yet or is hidden
// or hides it if it is curre
function show_hide_box(an, width, height, borderStyle)
{
    var href = an.href;
    var boxdiv = document.getElementById(href);
 
    if (boxdiv != null)
    {
        if (boxdiv.style.display=='none')
        {
            // Show existing box, move it
            // if document changed layout
            move_box(an, boxdiv);
            boxdiv.style.display='block';
        }
        else
            // Hide currently shown box.
            boxdiv.style.display='none';
        return false;
    }
 
    // Create box object through DOM
    boxdiv = document.createElement('div');
 
    // Assign id equalling to the document it will show
    boxdiv.setAttribute('id', href);
 
    boxdiv.style.display = 'block';
    boxdiv.style.position = 'absolute';
    boxdiv.style.width = width + 'px';
    boxdiv.style.height = height + 'px';
    boxdiv.style.border = borderStyle;
    boxdiv.style.textAlign = 'right';
    boxdiv.style.padding = '4px';
    boxdiv.style.background = '#FFFFFF';
    document.body.appendChild(boxdiv);
 
    var offset = 0;
 
    // Remove the following code if 'Close' hyperlink
    // is not needed.
    var close_href = document.createElement('a');
    close_href.href = 'javascript:void(0);';
    close_href.onclick = function()
        { show_hide_box(an, width, height, borderStyle); }
    close_href.appendChild(document.createTextNode('Close'));
    boxdiv.appendChild(close_href);
    offset = close_href.offsetHeight;
    // End of 'Close' hyperlink code.
 
    var contents = document.createElement('iframe');
    contents.scrolling = 'no';
    contents.frameBorder = '0';
    contents.style.width = width + 'px';
    contents.style.height = (height - offset) + 'px';
 
    boxdiv.appendChild(contents);
 
    move_box(an, boxdiv);
 
    if (contents.contentWindow)
        contents.contentWindow.document.location.replace(
            href);
    else
        contents.src = href;
 
    // The script has successfully shown the box,
    // prevent hyperlink navigation.
    return false;
}
//--></SCRIPT>

If you can too, figuring the ‘close’ feature to be seletec on the image alone [with no added text] would be cool.

to get an idea of my situation, heres the page: http://www.dolphinencounters.com/2index.htm - its the image with the guy wearing a hat… a cowboy hat.