Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to display image in a new window by clicking on the image in ASP.NET

Author: Rachel Nicole

The purpose of this article is to explain how we can display image in a new window after clicking on image in ASP.NET.

 

Many websites display images for their products or other stuff. Images are displayed in short size because of the short space on the web page. Users can see the image in a popup window in full and original size by clicking on the image. This can be done using different techniques of client side scripting and server side coding. In this article, we will see a simple technique by using JavaScript code to display image in another window by clicking on the image.
 
  1. Open Visual Studio 2010
  2. File > New > Web Site
  3. Visual Basic or Visual C# > ASP.NET Empty Web Site
  4. Right click on web site > Add New Item > Web Form
  5. Right click on website > New Folder (Name the folder as “Images”). Include the image in this folder.
  6. Add a Image control in between form tag

    <asp:Image ID="Image1" runat="server" width="250px" height ="200px" ImageUrl = "Images/Penguins.jpg" onclick="DisplayImageInNewWidnow();"/>
     
    We have to provide the path of the Image in ImageUrl attribute. We have added a method in onClick event of the Image control. This method is defined and explained below.

     
  7. Write a <script> tag in between <head> tag and write code below in it

    <script type="text/javascript">
           function DisplayImageInNewWidnow() {
                  var image = document.getElementById('<%= Image1.ClientID %>');
     
                  htmlcode = "<HTML><HEAD></HEAD>"
            + "<BODY TOPMARGIN=0 LEFTMARGIN=0 "
            + "MARGINHEIGHT=0 MARGINWIDTH=0><CENTER>"
            + "<IMG src='" + image.src + "'"
            + "BORDER=0 NAME=FullSizeImage "
            + "onload='window.resizeTo(document.FullSizeImage.width, document.FullSizeImage.height)'>"
            + "</CENTER>"
            + "</BODY></HTML>";
     
           newWindow = window.open('', 'FullSizeImage', 'toolbar=0,location=0,directories=0,menuBar=0,scrollbars=0,resizable=0,width=1,hight=1');
           newWindow.document.open();
           newWindow.document.write(htmlcode);
           newWindow.document.focus();
           newWindow.document.close();
           }
    </script>
     
    First we need to get the image control than we have written html code for new window. We called the open() method with parameters which will open a new window. All the parameters of open() method is optional so u can specify all of them or omit any. document.open() method opens an output stream to get the output from document.write() method which is called next in the code.  Document.focus() method gives focus to this element and document.close() method displays the collected data and closes the output stream which we have opened using document.open() method.
     
  8. Now you can see it in your browser.

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to use AJAX SlideShowExtender in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net