Advanced Search

Show floating div near cursor on mouseover, hide on mouseout

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

Expand | Embed | Plain Text

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.