mouseover and mouseout in javascript
This example shows how we can use onmouseover javascript functionality as well as onmouseout in javascript. Below is an example, where a user mouse over an image, it will display the large picture.
<!DOCTYPE html>
<html>
<body>
<img onmouseover="largePictureOnMouseOver(this)"onmouseout="smallPictureOnMouseOut(this)" border="0" src="https://mlty1s3y9cfm.i.optimole.com/KU6gzRQ-izvJLdpv/w:auto/h:auto/q:mauto/https://codeone.in/images/javascript.jpg" width="32" height="32">
<p>The large picture will display when mouse pointer over the image and when mouse pointer is moved out of picture</p>
<script>
function largePictureOnMouseOver(p) {
p.style.height = "64px";
p.style.width = "64px";
}
function smallPictureOnMouseOut(p) {
p.style.height = "32px";
p.style.width = "32px";
}
</script>
</body>
</html>
Similarly, in the below JavaScript example, we can use onmouseout which will display a larger picture when the user removes the mouse pointer from a picture.
<!DOCTYPE html>
<html>
<body>
<img onmouseout="largePictureOnMouseOver(this)"onmouseover="smallPictureOnMouseOut(this)" border="0" src="https://mlty1s3y9cfm.i.optimole.com/KU6gzRQ-izvJLdpv/w:auto/h:auto/q:mauto/https://codeone.in/images/javascript.jpg" width="32" height="32">
<p>The small picture will display when mouse pointer over the image and when mouse pointer is moved out of picture, large picture is displaying</p>
<script>
function largePictureOnMouseOver(p) {
p.style.height = "64px";
p.style.width = "64px";
}
function smallPictureOnMouseOut(p) {
p.style.height = "32px";
p.style.width = "32px";
}
</script>
</body>
</html>
