In: Computer Science
Create a page with jQuery.
1. Add "IMG.jpg" with size WIDTH="200" HEIGHT="60", give an id.
2. Use mouseenter(), width(), and height() to resize the picture to 800 by 230.
3. Use mouseleave, width(), and height() to resize the picture to 200 by 60.
NOTE :Image is used for demonstration purpose only.
HTML page :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- title for web page -->
<title>jQuery image</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery from CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
//take the image on mouseenter()
$("#myImg").mouseenter(function () {
//resize the image
$("#myImg").width(800);//set the image width
$("#myImg").height(230);//set the image height
});
$("#myImg").mouseleave(function () {
//resize the image
$("#myImg").width(200);//set the image width
$("#myImg").height(60);//set the image height
});
});
</script>
</head>
<body>
<!-- image -->
<img src="IMG.jpg" id="myImg" height="60" width="200" />
</body>
</html>
===========================================
Output :
Screen showing image :
Screen when mouse enter in the image :
Screen when mouse leave in the image :