How to Execute a JavaScript when moving the mouse pointer out of 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:

Single Articles

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

List of Mouse Events Attribute	Mouse Events Attribute
What is HTML onclick Event Attribute	Mouse Events Attribute
What is HTML ondblclick Event Attribute	Mouse Events Attribute
What is HTML onmousedown Event Attribute	Mouse Events Attribute
What is HTML onmousemove Event Attribute	Mouse Events Attribute
What is HTML onmouseout Event Attribute	Mouse Events Attribute
What is HTML onmouseover Event Attribute	Mouse Events Attribute
What is HTML onmouseup Event Attribute	Mouse Events Attribute
What is HTML onwheel Event Attribute	Mouse Events Attribute

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