I am using this script to display an image as popup on mouseover. The difficulty I am facing is that it is not positioning well in different monitor. It must be something to do with resolution.

function LargeImage(obj, e)
{
  var imgbtn=document.getElementById('<%=imgbtn1.ClientID%>');  
  imgbtn.src=obj;//source of the image
  document.getElementById('imgbox').style.visibility="visible";
  document.getElementById('imgbox').style.position="absolute";
  document.getElementById('imgbox').style.left=e.clientX-150 + "px";
  document.getElementById('imgbox').style.top=225 +"px"; 
} 

<div id="imgbox"><asp:imagebutton id="imgbtn1" runat="server" OnClick="ImageButton4_Click"/></div>

Thank you.

I am using this script to display an image as popup on mouseover. The difficulty I am facing is that it is not positioning well in different monitor. It must be something to do with resolution.

function LargeImage(obj, e)
{
  var imgbtn=document.getElementById('<%=imgbtn1.ClientID%>');  
  imgbtn.src=obj;//source of the image
  document.getElementById('imgbox').style.visibility="visible";
  document.getElementById('imgbox').style.position="absolute";
  document.getElementById('imgbox').style.left=e.clientX-150 + "px";
  document.getElementById('imgbox').style.top=225 +"px"; 
} 

<div id="imgbox"><asp:imagebutton id="imgbtn1" runat="server" OnClick="ImageButton4_Click"/></div>

Thank you.

• javascript
• html

• 1 Where do you want it to end up versus where is it ending up in different resolutions? – justkt Commented Apr 29, 2010 at 12:36
• Ikke was kind enough to fix this one for you, but for future reference, please read up on formatting your code: stackoverflow./editing-help (This is the link from the [?] icon above the edit box for questions.) – T.J. Crowder Commented Apr 29, 2010 at 12:37
• And what's the problem? It doesn't show up near the mouse pointer? I can imagine this would be the case in the y value, as you are hard coding it to 225 px and the user may click much further down the screen. – justkt Commented Apr 29, 2010 at 12:44

2 Answers 2

you can do this

document.getElementById('imgbox').style.position="fixed";
document.getElementById('imgbox').style.left=e.clientX + "px";
document.getElementById('imgbox').style.top= e.clientY + "px"; 

which will show the picture at the mouse location in the window (popup stays put if the user scrolls).

otherwise you need to pensate for document scrolling, something like

edit: fix the scroll value (for firefox)

document.getElementById('imgbox').style.position="absolute";
document.getElementById('imgbox').style.left=String(e.clientX+document.documentElement.scrollLeft)+"px";
document.getElementById('imgbox').style.top=String(e.clientY+document.documentElement.scrollTop)+"px"; 

you can look here to find a demo of determining which property to read for scrolling offsets by browser http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

You look like you're modifying the style of the imgbox div so that the left position is 150px left of the cursor, but the top position is just 225px from the top of its container (probably).

Should the top style be relative to the cursor as well?

Also, we can't see from your posted code when or how your function is being called. We also have no context for the imgbox element. More information would be useful.