Scribd Logo
Upload

Welcome to Scribd!

  • HTML Public Xmlns Runat Type SRC: Doctype HTML Head Title Title Script Script

    Uploaded by

    mahendrapandey32
    2 views2 pages
    This document describes how to enlarge images on mouseover in ASP.NET using jQuery. It includes the necessary HTML, CSS, and JavaScript code to: 1. Add thumbnail images to the page and style them. 2. Use jQuery mouseover and mouseout events to change the opacity of the thumbnail images and append a larger version of the image being hovered over. 3. Remove the enlarged image on mouseout by targeting the image container.

    Original Description:

    coding

    Original Title

    Image Enlarge in ASP

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document describes how to enlarge images on mouseover in ASP.NET using jQuery. It includes the necessary HTML, CSS, and JavaScript code to: 1. Add thumbnail images to the page and style them. 2. Use jQuery mouseover and mouseout events to change the opacity of the thumbnail images and append a larger version of the image being hovered over. 3. Remove the enlarged image on mouseout by targeting the image container.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    2 views2 pages

    HTML Public Xmlns Runat Type SRC: Doctype HTML Head Title Title Script Script

    Uploaded by

    mahendrapandey32
    This document describes how to enlarge images on mouseover in ASP.NET using jQuery. It includes the necessary HTML, CSS, and JavaScript code to: 1. Add thumbnail images to the page and style them. 2. Use jQuery mouseover and mouseout events to change the opacity of the thumbnail images and append a larger version of the image being hovered over. 3. Remove the enlarged image on mouseout by targeting the image container.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 2

    IMAGE ENLARGE IN ASP.

    NET



    http://aspdotnetcodebook.blogspot.in/2011/06/how-to-enlarge-image-on-mouseover-in.html

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

    <!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></title>
    <script type="text/javascript" src="Scripts/jquery-
    1.4.1.js"></script>
    <style type="text/css">
    .thumbnail
    {
    height: 100px;
    width: 100px;
    position: relative;
    }
    .image
    {
    position: relative;
    width: 400px;
    height: 250px;
    }
    </style>
    <script language="javascript" type="text/javascript">
    $(document).ready(function () {
    $(".thumbnail").mouseover(function () {
    $(".thumbnail").css("opacity", ".5");
    $(this).animate({ opacity: 1.0 });
    $("#imgContainer").append("<img class='image' src='" +
    $(this).attr("src") + "' />");

    });
    $(".thumbnail").mouseout(function () {
    $(".thumbnail").css("opacity", "1.0");
    $(".image").remove();
    });
    });

    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
    <div align="center">
    <img alt="" class="thumbnail" src="Images/Tree.jpg" />
    <img class="thumbnail" src="Images/dock.jpg" alt="" />
    <img class="thumbnail" src="Images/forest.jpg" alt="" />
    <img class="thumbnail" src="Images/garden.jpg" alt="" />
    <div id="imgContainer">
    </div>
    </div>
    </body>
    </html>

    You might also like