need help with JS mouseover/popup

[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

[Philip M]

Find where the function showAdLeft() is called and replace with showAdRight().

[SteveMTNO]

Originally Posted by Philip M

Find where the function showAdLeft() is called and replace with showAdRight().

That's what I thought when I first looked at the code. But after closer inspection, they both send the popup to the left. The difference is that showAdRight() sends it over an additional 150px to allow for the popup to appear in the same place as the one in the left column on that row...

[SteveMTNO]

OK, now that we've "semi-launched" the new site, I can post a URL so you can see the issue I'm having in the full context of the page.

Go to http://www.stltoday.com/autos and check out the Featured Rides module. You'll see 2 rows of 2 ads.

When you mouse over an ad, the popups currently go to the left. What I would to do is have them go to the right instead. More specifically, I'd like them to appear 25px to the right of the ad in the right column. So if you mouse over the ad in either column, it needs to appear 25px to the right of the ad in the right column.

Any help you can provide will be great appreciated... thanks!!

Steve