Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML onmousemove Event Attribute
The HTML onmousemove event attribute is triggered when the user moves the mouse pointer over an HTML element. This event fires continuously while the mouse is in motion over the target element, making it useful for tracking cursor movement and creating interactive hover effects.
Syntax
Following is the syntax for the onmousemove event attribute −
<tagname onmousemove="script"></tagname>
Where script is the JavaScript code to execute when the mouse moves over the element.
Parameters
The onmousemove event attribute accepts the following parameter −
- script − JavaScript code or function call to execute when the mouse moves over the element. The event object is automatically passed to the function.
Example − Color Change on Mouse Movement
Following example demonstrates the onmousemove event with a circle that changes color when the mouse moves over it −
<!DOCTYPE html>
<html>
<head>
<title>HTML onmousemove Event</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: white;
}
.circle {
background: #e74c3c;
height: 150px;
width: 150px;
border-radius: 50%;
margin: 20px auto;
transition: background-color 0.3s ease;
cursor: pointer;
}
.info {
margin: 20px 0;
font-size: 16px;
}
</style>
</head>
<body>
<h1>onmousemove Event Demo</h1>
<div class="circle" onmousemove="changeColor()" onmouseout="resetColor()"></div>
<p class="info">Move your cursor over the red circle above</p>
<script>
function changeColor() {
document.querySelector('.circle').style.background = '#3498db';
}
function resetColor() {
document.querySelector('.circle').style.background = '#e74c3c';
}
</script>
</body>
</html>
The output shows a red circle that turns blue when you move the mouse over it and returns to red when the mouse leaves −
onmousemove Event Demo [Red Circle - turns blue on mouse movement] Move your cursor over the red circle above
Example − Mouse Coordinate Tracking
Following example shows how to track mouse coordinates using the onmousemove event −
<!DOCTYPE html>
<html>
<head>
<title>Mouse Coordinate Tracking</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.tracking-area {
width: 400px;
height: 300px;
background: #f8f9fa;
border: 2px solid #007bff;
margin: 20px 0;
position: relative;
cursor: crosshair;
}
.coordinates {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-family: monospace;
}
</style>
</head>
<body>
<h2>Mouse Coordinate Tracker</h2>
<div class="tracking-area" onmousemove="showCoordinates(event)">
<div class="coordinates" id="coords">Move mouse here</div>
</div>
<p>Move your mouse inside the blue box to see coordinates</p>
<script>
function showCoordinates(event) {
var rect = event.target.getBoundingClientRect();
var x = Math.round(event.clientX - rect.left);
var y = Math.round(event.clientY - rect.top);
document.getElementById('coords').innerHTML = 'X: ' + x + ', Y: ' + y;
}
</script>
</body>
</html>
The output displays real-time mouse coordinates as you move the cursor within the tracking area −
Mouse Coordinate Tracker [Blue bordered box with "X: 125, Y: 87" coordinates updating in real-time] Move your mouse inside the blue box to see coordinates
Example − Interactive Trail Effect
Following example creates a trail effect that follows the mouse movement −
<!DOCTYPE html>
<html>
<head>
<title>Mouse Trail Effect</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background: #2c3e50;
color: white;
overflow: hidden;
}
.trail-area {
width: 100%;
height: 400px;
background: linear-gradient(45deg, #1a252f, #2c3e50);
border: 1px solid #34495e;
position: relative;
cursor: none;
}
.trail-dot {
position: absolute;
width: 8px;
height: 8px;
background: #e74c3c;
border-radius: 50%;
pointer-events: none;
animation: fade 1s ease-out forwards;
}
@keyframes fade {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.1); }
}
</style>
</head>
<body>
<h2>Mouse Trail Effect</h2>
<div class="trail-area" onmousemove="createTrail(event)"></div>
<p>Move your mouse over the dark area to see the trail effect</p>
<script>
function createTrail(event) {
var rect = event.target.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
var dot = document.createElement('div');
dot.className = 'trail-dot';
dot.style.left = (x - 4) + 'px';
dot.style.top = (y - 4) + 'px';
event.target.appendChild(dot);
setTimeout(function() {
if (dot.parentNode) {
dot.parentNode.removeChild(dot);
}
}, 1000);
}
</script>
</body>
</html>
The output shows a dark area where moving the mouse creates red dots that fade away, creating a trail effect.
Key Points
- Continuous firing − The onmousemove event fires repeatedly while the mouse is moving over the element, not just once.
-
Event object − The event object contains properties like
clientX,clientY,pageX, andpageYfor mouse coordinates. - Performance consideration − Since onmousemove fires frequently, avoid heavy computations in the event handler.
- Browser compatibility − Supported by all modern browsers and older versions of Internet Explorer.
Common Use Cases
- Interactive hover effects − Changing colors, sizes, or styles based on mouse position.
- Mouse coordinate tracking − Displaying real-time cursor position for applications like image editors.
- Custom tooltips − Positioning tooltips that follow the mouse cursor.
- Drawing applications − Creating drawing or sketching functionality on canvas elements.
- Visual feedback − Providing immediate visual responses to user interaction.
Conclusion
The onmousemove event attribute is a powerful tool for creating interactive web experiences that respond to mouse movement. It fires continuously while the mouse moves over an element, making it ideal for real-time tracking, hover effects, and dynamic user interfaces. Remember to optimize event handlers for performance since this event can fire very frequently.
218 Views
