Jump to content
Please Use CODE Tags

how to change this to a .gif

Zach's Tech Tips
By Zach's Tech Tips
in Programming
 Share
Posted

Hey linus community i am wondering how i can change the small black box that follows this cursor in a html page to a .gif file will follow the cursor

<!DOCTYPE html><html><head><title>box-shadow-experiment</title><style type="text/css">#box-shadow-div{position: fixed;width: 1px;height: 1px;border-radius: 100%;background-color:black;box-shadow: 0 0 10px 10px black;top: 49%;left: 48.85%;}</style><script type="text/javascript">window.onload = function(){var bsDiv = document.getElementById("box-shadow-div");var x, y;// On mousemove use event.clientX and event.clientY to set the location of the div to the location of the cursor:window.addEventListener('mousemove', function(event){x = event.clientX;y = event.clientY; if ( typeof x !== 'undefined' ){bsDiv.style.left = x + "px";bsDiv.style.top = y + "px";}}, false);}</script></head><body><div id="box-shadow-div"></div></body></html>

Thanks

 

Zach

Its when dragons have so much sex that the cpu cant handle it

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Put a img tag in the div?

could u copy the above script and then paste it with what you said to change please

Its when dragons have so much sex that the cpu cant handle it

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Put a img tag in the div.

and then get this

x = event.clientX;y = event.clientY;
and minus half the image dimensions to center it on the cursor

x = event.clientX - 50; //Assuming the image is 100x100y = event.clientY - 50;


 

This was the first thing that came to my mind so the probably will be better ways

is that all i need to change?

Its when dragons have so much sex that the cpu cant handle it

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Put a img tag in the div.

I dont get it?

Its when dragons have so much sex that the cpu cant handle it

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Yeah.. also need to remove the shadow styling.

 

Thanks so much!

<title>box-shadow-experiment</title><style type="text/css">#box-shadow-div{position: fixed;}</style><script type="text/javascript">window.onload = function(){var bsDiv = document.getElementById("box-shadow-div");var x, y;window.addEventListener('mousemove', function(event){x = event.clientX - CHANGE THIS TO HALF IMG WIDTH;y = event.clientY - CHANGE THIS TO HALF IMG HIEGHT;if ( typeof x !== 'undefined' ){bsDiv.style.left = x + "px";bsDiv.style.top = y + "px";}}, false);}</script></head><body><div id="box-shadow-div"><img src="POINT THIS TO IMG.gif"></div></body>

Its when dragons have so much sex that the cpu cant handle it

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×