How to show large image on mouse click on the small image using JavaScript in asp.net ?

In this tutorial I will show you how we can use java script to display the large image by clicking on the small image.

Steps:

Create new website.

Now add one more div tag in the body ....

<div id="bigDiv" style="position: absolute; z-index: 2; border: solid 1px black;

width: auto; height: auto; left: 250px;">

Drag the image control in the body of the form (also set the attribute ImageUrl to some image in the project )& place it after the above div tag.

Now add the following javascript in the head of the page.

<script type="text/javascript" language="javascript">
 
        function showZoomImage(obj) {
            document.getElementById("bigDiv").style.visibility = "visible";
            document.getElementById("bigDiv").innerHTML = "";
            document.getElementById("bigDiv").style.left = event.clientX;
            document.getElementById("bigDiv").style.top = event.clientY;
           document.getElementById("bigDiv").style.zIndex = "0";
 
        }
        function ShowDefaultImage(obj) {
            document.getElementById("bigDiv").innerHTML = "";
            document.getElementById("bigDiv").style.visibility = "hidden";
        }
 
 
   script>

This will look something like this.....

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
Inherits="_Default"EnableViewState="false" ViewStateMode="Disabled" %>
 
<! 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" language="javascript">
 
        function showZoomImage(obj) {
            document.getElementById("bigDiv").style.visibility = "visible";
            document.getElementById("bigDiv").innerHTML = "";
            document.getElementById("bigDiv").style.left = event.clientX;
            document.getElementById("bigDiv").style.top = event.clientY;
            document.getElementById("bigDiv").style.zIndex = "0";
 
        }
        function ShowDefaultImage(obj) {
            document.getElementById("bigDiv").innerHTML = "";
            document.getElementById("bigDiv").style.visibility = "hidden";
        }
 
    script>
head>
<body>
    <form id="form1" runat="server" enableviewstate="false" viewstatemode="Disabled">
    <div>
        <div id="bigDiv" style="position: absolute; z-index: 2; border: solid 1px black;
            width: auto; height: auto; left: 250px;">
        div>
<asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Desert.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />
        div>
    form>
body>
html>

Just keep in mind that id of the empty div & id in the script should be the same (i have indicated in the Green colour in the above mark-up)

Like this we can make much more things ....I have made this.....

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
    EnableViewState="false" ViewStateMode="Disabled" %>
 
<!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" language="javascript">
 
        function showZoomImage(obj) {
            document.getElementById("bigDiv").style.visibility = "visible";
            document.getElementById("bigDiv").innerHTML = "";
            document.getElementById("bigDiv").style.left = event.clientX;
            document.getElementById("bigDiv").style.top = event.clientY;
            document.getElementById("bigDiv").style.zIndex = "0";
 
        }
        function ShowDefaultImage(obj) {
            document.getElementById("bigDiv").innerHTML = "";
            document.getElementById("bigDiv").style.visibility = "hidden";
        }
 
 
    script>
    <style>
        .oneImage
        {
            padding: 5px 5px 5px 5px;
        }
        .allImage
        {
            padding: 0px 10px 0px 10px;
            width: 200px;
            height: 605px;
            overflow: scroll;
        }
    style>
head>
<body>
    <form id="form1" runat="server" enableviewstate="false" viewstatemode="Disabled">
    <div>
        <div id="bigDiv" style="position: absolute; z-index: 2; border: solid 1px black;
            width: auto; height: auto; left: 250px;">
        div>
        <div class="allImage">
            <div class="oneImage">
                <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Desert.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Chrysanthemum.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/Hydrangeas.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image4" runat="server" ImageUrl="~/Images/Jellyfish.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image5" runat="server" ImageUrl="~/Images/Lighthouse.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image6" runat="server" ImageUrl="~/Images/Desert.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image7" runat="server" ImageUrl="~/Images/Chrysanthemum.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image8" runat="server" ImageUrl="~/Images/Hydrangeas.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image9" runat="server" ImageUrl="~/Images/Jellyfish.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
            <div class="oneImage">
                <asp:Image ID="Image10" runat="server" ImageUrl="~/Images/Lighthouse.jpg" Width="100"
                    Height="100" onclick="showZoomImage(this);" />div>
        div>
    form>
body>
html>

Labels: ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)