Question

In: Computer Science

Create a page with jQuery. 1. Add "IMG.jpg" with size WIDTH="200" HEIGHT="60", give an id. 2....

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.

Solutions

Expert Solution

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 :


Related Solutions

Person Height Weight 1 60 114 2 60 60 3 61 200 4 62 240 5...
Person Height Weight 1 60 114 2 60 60 3 61 200 4 62 240 5 63 133 6 63 220 7 64 104 8 65 135 9 65 120 10 65 123 11 66 113 12 66 205 13 66 54 14 67 170 15 67 186 16 67 198 17 67 132 18 68 142 19 69 150 20 69 188 21 70 199 22 70 201 23 70 106 24 71 112 25 71 115 26 72...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
Add a 1- to 2-page section to your Playbook/Runbook. Create a prescriptive section of your playbook...
Add a 1- to 2-page section to your Playbook/Runbook. Create a prescriptive section of your playbook providing guidelines to secure each of these areas: Network connections Mobile devices Cloud services
1. Create a color image of size 200 × 200. The image should have a blue...
1. Create a color image of size 200 × 200. The image should have a blue background. 2. Create 100 yellow regions within the image that have a variable size. More specifically, their width should be an odd number and vary between 3 and 7 and their height should also be an odd number and vary between 3 and 7. For example, you may get rectangular regions of size 3 × 3, 3 × 5, 5 × 3, 5 ×...
Using Matlab 1. Create a color image of size 200 × 200. The image should have...
Using Matlab 1. Create a color image of size 200 × 200. The image should have a blue background. 2. Create 100 yellow regions within the image that have a variable size. More specifically, their width should be an odd number and vary between 3 and 7 and their height should also be an odd number and vary between 3 and 7. For example, you may get rectangular regions of size 3 × 3, 3 × 5, 5 × 3,...
---In the code, create add and delete a student by ID number when prompted /////////////////////////////////////////////////////////////// import...
---In the code, create add and delete a student by ID number when prompted /////////////////////////////////////////////////////////////// import java.util.Scanner; public class COurseCom666 {     private String courseName;     private String [] students = new String[1];     private int numberOfStudents;     public COurseCom66(String courseName) {         this.courseName = courseName;     }     public String[] getStudents() {         return students;     }     public int getNumberOfStudents() {         return numberOfStudents;     }     public String getCourseName() {         return courseName;     }     public...
Create an ASP.NET page and add ScriptManager and UpdatePanel controls. Next, add a SqlDataSource and DetailsView...
Create an ASP.NET page and add ScriptManager and UpdatePanel controls. Next, add a SqlDataSource and DetailsView control within the UpdatePanel and configure them so that the visitor can. add new records to the Books table. add two Label Web controls to this page—one outside the UpdatePanel and the other within the UpdatePanel. Have the Label Text properties assigned to the current date and time on each page load. When testing the page, note that when the page is first visited,...
Use HTML, CSS, jQuery and Bootstrap to do the following: 1. Add four buttons "Start", "Stop",...
Use HTML, CSS, jQuery and Bootstrap to do the following: 1. Add four buttons "Start", "Stop", "Back", "Reset". <button type="button"> 2. Add "glyphicon-shopping-cart" to <div id="sc" style="font-size: 100px; color: blue; ">. Use CSS in embeded style to set <style type="text/css">     #sc{ border-style: dotted; /* Required to animate border width */ border-color: red; border-width: 0; } </style> 3. <script> - "Start", call "animate()" function to move it to right by 300px for each click, speed is 2000. left: "+=300px". Hint:...
In beam modelling with Pinnacle RTPS, The source size is defined to give geometric penumbra width,...
In beam modelling with Pinnacle RTPS, The source size is defined to give geometric penumbra width, explain what else contributes to thepenumbra width? Explain why width of D​80-20​ is used to characterise penumbra width? Would the D​80-20be wider or narrower at high energy and why?
2.Consider a video file with the following specifications: • Width: 1920 • Height: 1080 • Frame...
2.Consider a video file with the following specifications: • Width: 1920 • Height: 1080 • Frame rate: 60 fps • Length: 2 hr 20 mins • Each frame is stored in 36-bit RGB a) What is the video bit rate per second? b) What is the size of the video file in GB (GigaBytes)? 3. If audio is added to the above video with the following specifications: • Sample rate of 44.1 kHz • Sampling depth: 16 bits • Dolby...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT