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:

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