|
|
The HTML
onmousemove event attribute is a global event attribute that triggers a script when the mouse pointer is moved while it is over a specific HTML element.
|
Example of HTML onmousemove Event Attribute
It will Execute a JavaScript when moving the mouse pointer over an image.
index.html
Example:
HTML
<img onmousemove="bigImg(this)" src="smiley.gif" alt="Smiley">
Output should be:
Definition and Usage of HTML onmousemove Event Attribute
The onmousemove attribute fires when the pointer is moving while it is over an element.
Browser Support of HTML onmousemove Event Attribute
Syntax of HTML onmousemove Event Attribute
<element onmousemove="script">
Attribute Values of HTML onmousemove Event Attribute
| Value | Description |
|---|---|
| script | The script to be run on onmousemove |
Technical Details of HTML onmousemove Event Attribute
| Supported HTML tags: | All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
|---|
How to Execute a JavaScript when moving the mouse pointer over an image
The function bigImg() is triggered when the user mouse pointer is moved over the image. This function enlarges the image.
The function normalImg() is triggered when the mouse pointer is moved out of the image. That function sets the height and width of the image back to normal.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="https://horje.com/avatar.png" alt="Admin" width="32" height="32">
<p>The function bigImg() is triggered when the user mouse pointer is moved over the image. This function enlarges the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the image. That function sets the height and width of the image back to normal.</p>
<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</body>
</html>
Output should be:
| html event attributes |
| List of Mouse Events Attribute | Mouse Events Attribute |
| HTML onclick Event Attribute | Mouse Events Attribute |
| HTML ondblclick Event Attribute | Mouse Events Attribute |
| HTML onmousedown Event Attribute | Mouse Events Attribute |
| HTML onmousemove Event Attribute | Mouse Events Attribute |
| HTML onmouseout Event Attribute | Mouse Events Attribute |
| HTML onmouseover Event Attribute | Mouse Events Attribute |
| HTML onmouseup Event Attribute | Mouse Events Attribute |
| HTML onwheel Event Attribute | Mouse Events Attribute |
| Example of HTML onmousemove Event Attribute | Mouse Events Attribute |
| Definition and Usage of HTML onmousemove Event Attribute | Mouse Events Attribute |
| Browser Support of HTML onmousemove Event Attribute | Mouse Events Attribute |
| Syntax of HTML onmousemove Event Attribute | Mouse Events Attribute |
| Attribute Values of HTML onmousemove Event Attribute | Mouse Events Attribute |
| Technical Details of HTML onmousemove Event Attribute | Mouse Events Attribute |
| How to Execute a JavaScript when moving the mouse pointer over an image | Mouse Events Attribute |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | Mouse Events Attribute |
Uploaded by: | Admin |
Reffered: https://www.w3schools.com/tags/ev_onmousemove.asp