Horje
HTML onmousemove Event Attribute
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:

Example of HTML onmousemove Event Attribute

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

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:

How to Execute a JavaScript when moving the mouse pointer over an image


html event attributes

Related Articles
List of Mouse Events Attribute HTML Mouse Events Attribute
HTML onclick Event Attribute HTML Mouse Events Attribute
HTML ondblclick Event Attribute HTML Mouse Events Attribute
HTML onmousedown Event Attribute HTML Mouse Events Attribute
HTML onmousemove Event Attribute HTML Mouse Events Attribute
HTML onmouseout Event Attribute HTML Mouse Events Attribute
HTML onmouseover Event Attribute HTML Mouse Events Attribute
HTML onmouseup Event Attribute HTML Mouse Events Attribute
HTML onwheel Event Attribute HTML Mouse Events Attribute

Single Articles
Example of HTML onmousemove Event Attribute HTML Mouse Events Attribute
Definition and Usage of HTML onmousemove Event Attribute HTML Mouse Events Attribute
Browser Support of HTML onmousemove Event Attribute HTML Mouse Events Attribute
Syntax of HTML onmousemove Event Attribute HTML Mouse Events Attribute
Attribute Values of HTML onmousemove Event Attribute HTML Mouse Events Attribute
Technical Details of HTML onmousemove Event Attribute HTML Mouse Events Attribute
How to Execute a JavaScript when moving the mouse pointer over an image HTML Mouse Events Attribute

Type :
 Develop
Category :
 Web Tutorial
Sub Category :
 HTML Mouse Events Attribute
Uploaded by :
 Admin 

Read Article

https://horje.com/learn/1434/reference

 

Horje