need help with JS mouseover/popup: appears to the left instead of the right

[stevemtno]

I'm working on redesigning our site and I'm having a problem with a JS mouseover/popup. Hopefully someone here can help me. Right now, when you mouse over an ad, you get a larger version of the ad in a popup window that appears to the left. What I need to do is make it popup to the right instead.

You can see the current popup in action here: http://www.stltoday.com/autos

Go to the Featured Autos section.

This is the JS that it's using:

function showAdLeft(objname) {
 
  if(document.getElementById) {
    var adobj=document.getElementById('ad'+objname); // the floating ad
    var obj=document.getElementById(objname); // the graphic link
    var objleft=obj.offsetLeft;
    var objtop=obj.offsetTop;
    var objwidth=obj.offsetWidth;
    var objheight=obj.offsetHeight;
    var objxcenter=(objwidth/2)+objleft;
    var objycenter=(objheight/2) +objtop;
    var objybottom=obj.offsetHeight;
    var adobjwidth=adobj.offsetWidth;
    var adobjheight=adobj.offsetHeight;
    var adobjxcenter=adobjwidth/2;
    var adobjycenter=adobjheight/2;
    adobj.style.left=objleft-adobjwidth;
    adobj.style.top=objycenter-adobjycenter;
    adobj.style.visibility="visible"
  }
}
 
function showAdRight(objname) {
 
  if(document.getElementById) {
    var adobj=document.getElementById('ad'+objname); // the floating ad
    var obj=document.getElementById(objname); // the graphic link
    var objleft=obj.offsetLeft-150;     //Make adjustment for being in right column
    var objtop=obj.offsetTop;
    var objwidth=obj.offsetWidth;
    var objheight=obj.offsetHeight;
    var objxcenter=(objwidth/2)+objleft;
    var objycenter=(objheight/2) +objtop;
    var objybottom=obj.offsetHeight;
    var adobjwidth=adobj.offsetWidth;
    var adobjheight=adobj.offsetHeight;
    var adobjxcenter=adobjwidth/2;
    var adobjycenter=adobjheight/2;
    adobj.style.left=objleft-adobjwidth;
    adobj.style.top=objycenter-adobjycenter;
    adobj.style.visibility="visible"
  }
}
 
function hideAd(objname) {
  if(document.getElementById) {
    adobj=document.getElementById('ad' +objname);
    adobj.style.visibility="hidden"
  }
}
 
// -->
</script>
 

I'm assuming this should be an easy fix, but I have no idea where to start. Again, if anyone can help, I would greatly appreciate it. Thanks!

Steve

[hsriat]

Just add around 300px to the style.left property each time you display it.

PS: You website is not cross browser. The mouseover thing doesn't position properly in Firefox and Safari.

[acoder]

When setting left and top properties, don't forget the units, e.g. "px". This will make it work in non-IE browsers too.