title: Javascript and AJAX : Floating an image next to the cursor - questions
body: <p>I have got a javascript code that will make a floating image appear next to the mouse pointer (and through the use of php it shows the image that the mosue is hovering over, but full size because the image on the page itself is sized down a bit). But whilst it is OK if the image is on the left of the page, there is a problem if the image is on the right hand side.</p>
  
  <p>The code:</p>
  
  <pre><code>&lt;script&gt;
  var cX = 0; var cY = 0; var rX = 0; var rY = 0;
  function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
  function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
  if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
  else { document.onmousemove = UpdateCursorPosition; }
  function AssignPosition(d) {
  if(self.pageYOffset) {
  rX = self.pageXOffset;
  rY = self.pageYOffset;
  }
  else if(document.documentElement &amp;&amp; document.documentElement.scrollTop) {
  rX = document.documentElement.scrollLeft;
  rY = document.documentElement.scrollTop;
  }
  else if(document.body) {
  rX = document.body.scrollLeft;
  rY = document.body.scrollTop;
  }
  if(document.all) {
  cX += rX; 
  cY += rY;
  }
  d.style.left = (cX+10) + "px";
  d.style.top = (cY+10) + "px";
  }
  function HideContent(d) {
  if(d.length &lt; 1) { return; }
  document.getElementById(d).style.display = "none";
  }
  function ShowContent(d,i) {
  if(d.length &lt; 1) { return; }
  var dd = document.getElementById(d);
  AssignPosition(dd);
  dd.style.display = "block";
  $(d).setHTML ('&lt;img src="'+i'" /&gt;');
  }
  function ReverseContentDisplay(d) {
  if(d.length &lt; 1) { return; }
  var dd = document.getElementById(d);
  AssignPosition(dd);
  if(dd.style.display == "none") { dd.style.display = "block"; }
  else { dd.style.display = "none"; }
  }
  //--&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is a standard image that will trigger the floating content:</p>
  
  <pre><code>&lt;a onmousemove="ShowContent('FloatingImage','image.jpg'); return true;" onmouseover="ShowContent('FloatingImage','image.jpg'); return true;" onmouseout="HideContent('FloatingImage','image.jpg'); return true;" href="javascript:ShowContent('FloatingImage','image.jpg')"&gt;standard html&lt;/a&gt;
  
  &lt;div 
     id="FloatingImage" 
     style="display:none; 
        position:absolute; 
        border-style: solid; 
        background-color: white; 
        padding: 5px;
        z-index:+1"&gt;
  &lt;img id="MouseImage" name="MouseImage" src="LR-10.jpg" /&gt;
  &lt;/div&gt;
  
  --end code--
  </code></pre>
  
  <p>.... On its own this is fine and it works. as you can float the mouse over the next thumbnail image and the floating image changes accordingly whilst keeping aspect ratio. BUT if the thumbnail image is on the right hand side, the floating image is off the right hand edge of the screen and cannot be seen: is there any way of placing a 'block' within the JS code so that if the thumbnail image is close to the edge of the content (screen edge or edge of the containing DV layer) than it shows the image on the left hand side of the mouse pointer instead?</p>
  
  <p>Next question: this code works fine if I open the page on its own - BUT my website design will be calling the page to open inside a DIV layer by means of AJAX. This breaks the code and it doesn't work then. This has happened with other scripts I have written: works fine by itself, but put in through an AJAX load request and it fails. How can this be solved?</p>
  
  <p>Thanks.</p>