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

01:02:00  , , , ,  No comments

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>


First - Add - New - Web Form - Select Image Control From ToolBox - F4 Property - Assign - ImageURL - Image 





Next - Add JavaScript File form Image1 & Image2 




Show - Image Source Code For onclick Function Calling









0 comments:

Post a Comment