- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Change Background Color According to the Mouse Location using JavaScript?
JavaScript is a famous programming language that is one of the core languages of the World Wide Web (WWW) alongside HTML and CSS. It allows the programmer to capture events and modify the Document Object Model (DOM). In this article we are going to see how we can make use of JavaScript to change the background color according to the location of the mouse cursor.
Mousemove Event
The mousemove is an event which gets fired at an element when the cursor of the mouse is moved, and it is still inside the element of concern. It gives us information about the offset x and y coordinates of the cursor point.
Syntax
addEventListener(‘mousemove’, (event)=>{});
Returns: A MouseEvent object
Algorithm
We are going to make use of the mousemove event to get the location of the mouse pointer and then manipulate the background color using this information. For the purposes of illustration, I am going to set the background color of the element to be the color RGB(x, y, x+y) where x and y are the coordinates of the mouse pointer.
Example
Let us try to understand this with the help of an example.
Step 1: First we will define the HTML code.
<!DOCTYPE html> <html> <head> <title>How to change background color according to mouse location using JavaScript?</title> </head> <body> <h4>How to change background color according to mouse location using JavaScript?</h4> <div id="main"></div> </body> </html>
Step 2: Now we will provide some styling to the web page with the help of CSS.
<style>
#main {
width: 100%;
height: 200px;
background-size: cover;
background-color: yellow;
}
</style>
Step 3: Now we will write the logic of changing the background color using the movemove event.
<script>
let div = document.getElementById("main");
div.addEventListener("mousemove", function(event) {
let x = event.offsetX;
let y = event.offsetY;
div.style.backgroundColor = `rgb(${x%255}, ${y%255}, ${(x + y)%255})`;
});
</script>
Here is the complete code:
<!DOCTYPE html>
<html>
<head>
<title>How to change background color according to mouse location using JavaScript?</title>
<style>
#main {
width: 100%;
height: 200px;
background-size: cover;
background-color: yellow;
}
</style>
</head>
<body>
<h4>How to change background color according to mouse location using JavaScript?</h4>
<div id="main"></div>
<script>
let div = document.getElementById("main");
div.addEventListener("mousemove", function (event) {
let x = event.offsetX;
let y = event.offsetY;
div.style.backgroundColor = `rgb(${x%255}, ${y%255}, ${(x + y)%255})`;
});
</script>
</body>
</html>
Conclusion
In this article, with the help of JavaScript mouse move event we were able to track the movement of the mouse pointer. This allowed us to change background color by altering the backgroundcolor property everytime the event was fired.
162 Views
