I've come across a JavaScript code that allows for a floating image to appear next to the mouse pointer. With the use of PHP, it displays the full-size image that the mouse is hovering over, even if the image on the page itself is slightly downsized. The problem arises when the image is positioned on the right side of the page.
Take a look at the code below:
<script>
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;}
// More code here...
//-->
</script>
Here is a simple example of an image triggering the floating content:
<a onmousemove="ShowContent('FloatingImage','image.jpg'); return true;" href="javascript:ShowContent('FloatingImage','image.jpg')">standard html</a>
<div
id="FloatingImage"
style="display:none;">
<img id="MouseImage" name="MouseImage" src="LR-10.jpg" />
</div>
--end code--
While this code works well on its own, it poses an issue when the thumbnail image is on the right side and the floating image goes off-screen. Is there a way to modify the JS code so that the image appears on the left side of the mouse pointer instead?
Another concern: When I integrate this code into my website design using AJAX to load the page inside a DIV layer, the functionality breaks. This has been an issue with other scripts as well. How can this be addressed?
Thank you.