Question

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.

Answer 1

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 compensate 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