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>