• Image Button Server Control in ASP.NET

    Posted on April 29, 2012 by in ASP.NET, Dotnet, VB.NET

    Working with Image
    The Image control displays the image defined by its ImageUrl property. The following sample illustrates using this control.

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <script runat="server">
        Protected Sub SubmitBtn_Click(ByVal sender As Object, _
                                      ByVal e As EventArgs)
            image1.ImageUrl = selectCereal.SelectedItem.Value
            image1.AlternateText = selectCereal.SelectedItem.Text
        End Sub
    
        </script>
        <head runat="server"></head>
    <body>
        <h3><font face="Verdana">Image Control Example</font></h3>
        <form id="form1" runat="server">
        <div>
            <asp:Image id="image1" runat="server" ImageUrl="Grains.jpg"
                            AlternateText="Healthy Grains" />
            <p>
                Select image file:
                <asp:DropDownList ID="selectCereal" runat="server">
                    <asp:ListItem Value="Grains.jpg">
    Healthy Grains</asp:ListItem>
                    <asp:ListItem Value="cornflake.jpg">
    Corn Flake Cereal</asp:ListItem>
                    <asp:ListItem Value="honeyoat.jpg">Honey Oats</asp:ListItem>
                </asp:DropDownList>
                <asp:Button ID="btnSubmit" runat="server" Text="Apply"
                    OnClick="SubmitBtn_Click" />
            </p>
        </div>
        </form>
    </body>
    </html>
    


    Select “Honey Oats” from the drop down and click on “Apply” button. “Honey Oats” image will be loaded into the image control.

    Working with ImageButton
    Like the Button Control, ImageButton is used to post back to the server. Use the ImageButton control to display an image that responds to mouse clicks. Both the Click and Command events are raised when the ImageButton control is clicked.  For additional button examples, see Button and LinkButton. The following sample illustrates using the ImageButton control.

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <script runat="server">
        Protected Sub ImageBtn_Click(ByVal sender As Object, _
                                      ByVal e As EventArgs)
            lblText.Text = "You have clicked the image button"
        End Sub
    
        </script>
        <head runat="server"></head>
    <body>
        <h3><font face="Verdana">Image Button Example</font></h3>
        <form id="form1" runat="server">
        <div>
            <p>
                <asp:ImageButton ID="btnSubmit" ImageUrl="mango.jpg"
                        BorderWidth="2px" runat="server"
                    OnClick="ImageBtn_Click" />
            </p>
            <p>
                <asp:Label ID="lblText" runat="server" />
            </p>
        </div>
        </form>
    </body>
    </html>
    


    Using ImageButton as an Image Map
    The ImageButton click event also suppliers the x/y coordinates of where the user clicked the image. This provides a means to respond differently depending on what part of the image is clicked. The following sample illustrates using the ImageButton control as an image map.

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <script runat="server">
        Protected Sub ImageBtn_Click(ByVal sender As Object, _
                                      ByVal e As ImageClickEventArgs)
            Dim x As Integer = e.X
            Dim y As Integer = e.Y
            lblText1.Text = "X: " + x.ToString()
            lblText2.Text = "Y: " + y.ToString()
        End Sub
    
        </script>
        <head runat="server"></head>
    <body>
        <h3><font face="Verdana">Using Image Button as an Image Map</font></h3>
        <form id="form1" runat="server">
        <div>
            <table width="100%" border="1">
                <tr>
                    <td width="25%">
                        <asp:ImageButton ID="btnSubmit" ImageUrl="billgates.jpg"
                        BorderWidth="2px" runat="server"
                    OnClick="ImageBtn_Click" />
                    </td>
                    <td>
                        <asp:Label ID="lblText1" runat="server" /><br />
                         <asp:Label ID="lblText2" runat="server" />
                    </td>
                </tr>
            </table>
    
            <p>
                 <asp:Label ID="lblText3" runat="server" />
            </p>
        </div>
        </form>
    </body>
    </html>
    


    Click on the image and notice that the cooridnates are written on the right cell.

    Mouse-Over Effects on ImageButton
    You can hook the client script events onmouseover and onmouseout on an ImageButton control to provide mouse-over such as changing the image source of the button. Clients attributes such as onmouseover are disregarded by ASP.NET on the server and passed unchanged to the browser. If your targets new browsers that suppots DHTML, these events will occur in the browser as the cursor passes over the button.

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <script runat="server">
        Protected Sub ImageBtn1_Click(ByVal sender As Object, _
                                      ByVal e As ImageClickEventArgs)
            lblText.Text = "You clicked ImageButton1"
        End Sub
        Protected Sub ImageBtn2_Click(ByVal sender As Object, _
                                      ByVal e As ImageClickEventArgs)
            lblText.Text = "You clicked ImageButton2"
        End Sub
        Protected Sub ImageBtn3_Click(ByVal sender As Object, _
                                      ByVal e As ImageClickEventArgs)
            lblText.Text = "You clicked ImageButton3"
        End Sub
        </script>
        <head runat="server">
        <title></title>
        <style type="text/css">
            .applyBorder{border:0.2cm solid red;}
            .removeBorder{border:0.2cm solid gainsboro;}
        </style>
        </head>
    <body>
        <h3><font face="Verdana">Mouse-Over Effects on Image Button</font></h3>
        <form id="form1" runat="server">
        <div>
            <asp:ImageButton ID="ImageButton1" ImageUrl="banana.jpg"
                        BorderWidth="0.2cm"
                        BorderColor="Gainsboro"
                        onmouseover="this.style.border='0.2cm solid red';"
                        onmouseout="this.style.border='0.2cm solid gainsboro';"
                        runat="server"
                        OnClick="ImageBtn1_Click" />
                        &nbsp;&nbsp;
                        Applies an inline CSS style ...
                        <br /><br />
            <asp:ImageButton ID="ImageButton2" ImageUrl="banana.jpg"
                        CssClass="removeBorder" BorderWidth="1"
                        onmouseover="this.className='applyBorder'"
                        onmouseout="this.className='removeBorder'"
                        runat="server"
                        OnClick="ImageBtn2_Click" />
                        &nbsp;&nbsp;
                        Applies an predefined CSS style ...
                        <br /><br />
            <asp:ImageButton ID="ImageButton3" ImageUrl="banana.jpg"
                        BorderWidth="0.2cm"
                        BorderColor="Gainsboro"
                        onmouseover="this.src='mango.jpg'"
                        onmouseout="this.src='banana.jpg'"
                        runat="server"
                        OnClick="ImageBtn3_Click" />
                        &nbsp;&nbsp;
                        Changes the source image ...
                        <br>
            <p>
                 <asp:Label ID="lblText" runat="server" />
            </p>
        </div>
        </form>
    </body>
    </html>
    


    Hover over the first image button and you will notice that the border color changed to red color as shown below:

    Hover over the third image button and you would notice the image source changed to mango.jpg from banana.jpg.

    Be Sociable, Share!
      Post Tagged with ,

    Written by

    Software architect with over 10 years of proven experience in designing & developing n-tier and web based software applications, for Finance, Telecommunication, Manufacturing, Internet and other Commercial industries. He believes that success depends on one's ability to integrate multiple technologies to solve a simple as well as complicated problem.

    View all articles by

    Email : [email protected]

    Leave a Reply