Show floating div near cursor on mouseover, hide on mouseout


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <script type="text/javascript" language="JavaScript">
  2. <!-- Copyright 2006,2007 Bontrager Connection, LLC
  3. // http://bontragerconnection.com/ and http://willmaster.com/
  4. // Version: July 28, 2007
  5. var cX = 0; var cY = 0; var rX = 0; var rY = 0;
  6. function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
  7. function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
  8. if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
  9. else { document.onmousemove = UpdateCursorPosition; }
  10. function AssignPosition(d) {
  11. if(self.pageYOffset) {
  12. rX = self.pageXOffset;
  13. rY = self.pageYOffset;
  14. }
  15. else if(document.documentElement && document.documentElement.scrollTop) {
  16. rX = document.documentElement.scrollLeft;
  17. rY = document.documentElement.scrollTop;
  18. }
  19. else if(document.body) {
  20. rX = document.body.scrollLeft;
  21. rY = document.body.scrollTop;
  22. }
  23. if(document.all) {
  24. cX += rX;
  25. cY += rY;
  26. }
  27. d.style.left = (cX+10) + "px";
  28. d.style.top = (cY+10) + "px";
  29. }
  30. function HideContent(d) {
  31. if(d.length < 1) { return; }
  32. document.getElementById(d).style.display = "none";
  33. }
  34. function ShowContent(d) {
  35. if(d.length < 1) { return; }
  36. var dd = document.getElementById(d);
  37. AssignPosition(dd);
  38. dd.style.display = "block";
  39. }
  40. function ReverseContentDisplay(d) {
  41. if(d.length < 1) { return; }
  42. var dd = document.getElementById(d);
  43. AssignPosition(dd);
  44. if(dd.style.display == "none") { dd.style.display = "block"; }
  45. else { dd.style.display = "none"; }
  46. }
  47. //-->
  48. </script>
  49.  
  50.  
  51. <a
  52. onmouseover="ShowContent('uniquename3'); return true;"
  53. onmouseout="HideContent('uniquename3'); return true;"
  54. href="javascript:ShowContent('uniquename3')">
  55. [show on mouseover, hide on mouseout]
  56. </a>
  57. <div
  58. id="uniquename3"
  59. style="display:none;
  60. position:absolute;
  61. border-style: solid;
  62. background-color: white;
  63. padding: 5px;">
  64. Content goes here.
  65. </div>

URL: http://willmaster.com/blog/css/Floating_Layer_At_Cursor_Position.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.