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:
| Example of HTML onmouseout Event Attribute | HTML Mouse Events Attribute |
| Definition and Usage of HTML onmouseout Event Attribute | HTML Mouse Events Attribute |
| Browser Support of HTML onmouseout Event Attribute | HTML Mouse Events Attribute |
| Syntax of HTML onmouseout Event Attribute | HTML Mouse Events Attribute |
| Attribute Values of HTML onmouseout Event Attribute | HTML Mouse Events Attribute |
| Technical Details of HTML onmouseout Event Attribute | HTML Mouse Events Attribute |
| How to Execute a JavaScript when moving the mouse pointer out of an image | HTML Mouse Events Attribute |
| 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 |
|
Type
: |
html |
|
Category
: |
Web Tutorial |
|
Sub Category
: |
HTML Mouse Events Attribute |
|
Uploaded by
: |
Admin |