Wednesday, 17 June 2015

Display Original Image Size in New Window When Clicking on the Image Using JavaScript Asp.Net

Display Original Image Size in new window when clicking on the Image

Open Popup Window When Image Click Show Same Window or New Blank Window or Default Size Window Show Image Using Javascript Asp.Net C#.

                Download Coding

                       Download

                       DEMO
                               

                      
                            HTML CODING

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

<title></title>
<script type="text/javascript" lang="javascript">
// Open window 
    function DisplayInWidnow() {
        var popupimage = document.getElementById('<%= Image1.ClientID %>').src;
        html = "<HTML><HEAD><TITLE>Photo</TITLE>"
        + "</HEAD><BODY LEFTMARGIN=0 "
        + "MARGINWIDTH=0 TOPMARGIN=0 MARGINHEIGHT=0><CENTER>"
        + "<IMG src='"
        + popupimage
        + "' BORDER=0 NAME=image "
        + "onload='window.resizeTo(document.image.width,document.image.height)'>"
        + "</CENTER>"
        + "</BODY></HTML>";
        popup = window.open('''image''toolbar=0,location=0,directories=0,menuBar=0,scrollbars=0,resizable=1');
        popup.document.open();
        popup.document.write(html);
        popup.document.focus();
        popup.document.close();
    }

// New Tab OPen
    function DisplayInWidnow1() {
        var popupimage = document.getElementById('<%= Image2.ClientID %>').src;
        html = "<HTML><HEAD><TITLE>Photo</TITLE>"
        + "</HEAD><BODY LEFTMARGIN=0 "
        + "MARGINWIDTH=0 TOPMARGIN=0 MARGINHEIGHT=0><CENTER>"
        + "<IMG src='"
        + popupimage
        + "' BORDER=0 NAME=image "
        + "onload='window.resizeTo(document.image.width,document.image.height)'>"
        + "</CENTER>"
        + "</BODY></HTML>";
        popup = window.open('');
        popup.document.open();
        popup.document.write(html);
        popup.document.focus();
        popup.document.close();
    }


</script></head>

<body>
<div>   
   
<asp:Image ID="Image1" width="100px" height ="100px"  runat="server" ImageUrl = "~/image/Koala.jpg" onclick="DisplayInWidnow();"/>
    &nbsp;
    <asp:Image ID="Image2"  width="100px" height ="100px"  runat="server" ImageUrl = "~/image/Penguins.jpg" onclick="DisplayInWidnow1();" />
</div>

</body>
</html>















0 comments:

Post a Comment