Web design & Internet tutorials
Search the site...
Home» Uncategorized » Follow the cursor JavaScript sample

Follow the cursor JavaScript sample

Posted by David - June 27, 2016 - Uncategorized

Here’s a simple piece of code that you can copy and paste if you want to set up an effect where an object follows the cursor around your web page: 

<head><style>#divtoshow {position:absolute;display:none;color:white;background-color:black}#onme {width:150px;height:80px;background-color:yellow;cursor:pointer}</style><scripttype="text/javascript">var divName ='divtoshow';// div that is to follow the mouse (must be position:absolute)var offX =15;// X offset from mouse positionvar offY =15;// Y offset from mouse positionfunction mouseX(evt){if(!evt) evt = window.event;if(evt.pageX)return evt.pageX;elseif(evt.clientX)return evt.clientX +(document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft);elsereturn0;}function mouseY(evt){if(!evt) evt = window.event;if(evt.pageY)return evt.pageY;elseif(evt.clientY)return evt.clientY +(document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);elsereturn0;}function follow(evt){var obj = document.getElementById(divName).style;
    obj.left =(parseInt(mouseX(evt))+offX)+'px';
    obj.top =(parseInt(mouseY(evt))+offY)+'px';}
document.onmousemove = follow;</script></head><body><divid="divtoshow">test</div><br><br><divid='onme'onMouseover='document.getElementById(divName).style.display="block"'onMouseout='document.getElementById(divName).style.display="none"'>Mouse over this</div></body>

Comments are closed.

Recent Posts

  • Google Analytics for Creative Professionals – new class on Pluralsight
  • Follow the cursor JavaScript sample
  • Part Four: Tools that let amateurs look like professionals
  • Part Three: Influence, Klout and finding what’s hot
  • Best social media tools part 2: Twitter, Instagram and Pinterest
  • How to add sound to a website
  • The advantages of a dynamic website, such as WordPress
  • How do you preserve Google rankings when you redesign a WordPress site ?
  • Browser Testing Tools
  • My updated Facebook Template works on small and large screens




© 2001 - 2020 All rights reserved. DigitalFamiliy.com | Terms & Conditions of Use | Privacy Policy

This is a demonstration store. No physical products will be shipped. Dismiss