HTML onmouseover Event Attribute - HTML Mouse Events Attribute

The HTML onmouseover event attribute is a global event handler that triggers a specified action when the mouse pointer moves over an HTML element. This attribute is commonly used to add interactivity to web pages by executing JavaScript code in response to a user hovering their mouse over an element.

Example of HTML onmouseover Event Attribute

It will Execute a JavaScript when moving the mouse pointer over an image.

index.html

Example: HTML

 <img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">

Output should be:

Definition and Usage of HTML onmouseover Event Attribute

The onmouseover attribute fires when the mouse pointer moves over an element.

Tip: The onmouseover attribute is often used together with the onmouseout attribute.

Browser Support of HTML onmouseover Event Attribute

Syntax of HTML onmouseover Event Attribute

<element onmouseover="script">

Attribute Values of HTML onmouseover Event Attribute

Value	Description
script	The script to be run on onmouseover

Technical Details of HTML onmouseover 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 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 onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="https://horje.com/avatar.png" alt="Smiley" width="32" height="32">

<p>The function bigImg() is triggered when the user mouse 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

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