Reader Level:
ARTICLE

Move Mouse on Image For Zoom in and Zoom Out Effect in JQuery

Posted by Sapna Articles | JQuery April 28, 2012
The article will explore the mouseover() and mouseout () functions of jQuery.
  • 0
  • 0
  • 15701
Download Files:
 

Introduction

This article describes how to create a simple image zoom in and zoom out effect with jQuery and CSS step by step. jQuery is a great tool that helps our imagination turn ideas into reality. We can do almost everything we can think of with the help of this useful tool.

Step 1: First we have to create a Web Application.

  • Go to Visual Studio 2010.
  • New--> And select the Web Application.
  • Give whatever name you want to.
  • Click OK.

Step 2: Secondly you have to add a new page to the website.

  • Go to the Solution Explorer.
  • Right-click on the project name.
  • Select add new item.
  • Add new web page and give it a name.
  • Click OK.

Step 3: Now add some images in the "Images" folder of the project.

img1.jpg

Step 4: In this step add the CSS code inside the <style> tag and place it into the <head> section of your page.

<style type="text/css">

        body

        {

            font-family: Arial, Sans-Serif;

            font-size: 0.75em;

        }

        #imgstones

        {

            width: 100%;

            overflow: hidden;

        }

        #imgstones a

        {

            position: relative;

            float: left;

            margin: 5px;

        }

        #imgstones a span

        {

            background-repeat: no-repeat;

            width: 48px;

            height: 48px;

            display: none;

            position: absolute;

            left: 15px;

            top: 15px;

        }

        #imgstones

        {

            border: solid 1px #999;

            padding: 5px;

        }

    </style>

Step 5: In this step we have to write the script reference to the aspx page; let us see from where you have to write the script code.

img2.jpg

Right-click on selected files respectively -> copy and paste it inside <Head> section of your page; see step 6.

Step 6: Let us see the script code to add inside the <script></script> tags and that will be placed either in the <head> section or the <body> section as you prefer.
 

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 
Step 7:
In this step we have to write the JavaScript code in the <body> tag of our page which is given below.
 

<script type="text/javascript">

        $(document).ready(function () {

            $('#imgstones').width(200);

            $('#imgstones').mouseover(function () {

                $(this).css("cursor", "pointer");

                $(this).animate({ width: "500px" }, 'slow');

            });

 

            $('#imgstones').mouseout(function () {

                $(this).animate({ width: "200px" }, 'slow');

            });

        });

</script>

Step 8: In this step you will see the body code of the Default2.aspx page which is given below.

Code:

<body>

    <div>

        <h1> Move mouse on image to Zoom In and Zoom Out </h1>

        <br />

        <a>

            <img src="images/stones.jpg" alt="stone" id="imgstones" /></a>

    </div>

</body>

  
Step 9:
In this step we will see the complete code of the Default2.aspx page which is given below.

Code


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title> Move mouse on image for Zoom In and Zoom Out effect </title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#imgstones').width(200);

            $('#imgstones').mouseover(function () {

                $(this).css("cursor", "pointer");

                $(this).animate({ width: "500px" }, 'slow');

            });

 

            $('#imgstones').mouseout(function () {

                $(this).animate({ width: "200px" }, 'slow');

            });

        });

    </script>

    <style type="text/css">

        body

        {

            font-family: Arial, Sans-Serif;

            font-size: 0.75em;

        }

        #imgstones

        {

            width: 100%;

            overflow: hidden;

        }

        #imgstones a

        {

            position: relative;

            float: left;

            margin: 5px;

        }

        #imgstones a span

        {

            background-repeat: no-repeat;

            width: 48px;

            height: 48px;

            display: none;

            position: absolute;

            left: 15px;

            top: 15px;

        }

        #imgstones

        {

            border: solid 1px #999;

            padding: 5px;

        }

    </style>

</head>

<body>

    <div>

        <h1> Move mouse on image for Zoom In and Zoom Out effect

            </h1>

        <br />

        <a>

            <img src="images/stones.jpg" alt="stone" id="imgstones" /></a>

    </div>

</body>

</html>

 

 Step 10: In this step we will see the design of the Default2.aspx page which is given below.

img3.jpg

Step 11: In this step we are going to run the Default2.aspx page by pressing F5.

img4.jpg

Move the mouse on the image to see the zoom in and zoom out effect.

img5.jpg

img4.jpg

COMMENT USING

Trending up