Creating Image Buttons

You can see the image button in the ImageButtons example from the CD-ROM at work in Figure 17.2. As discussed in the In Depth section of this chapter, when you click this image button, the code displays the location at which you clicked, as you can see in the figure.

As with Image controls, you set the URL of the image to be used to the ImageUrl property. (To set the ImageUrl property at design time, click this property in the Properties window and browse to the image you want to use.) You also can set the image's width and height with the Width and Height properties. And you can add code to the image button's Click and Command events as you would for any button.

Here's WebForm1.aspx for the ImageButtons example on the CD-ROM:

<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb" Inherits="ImageButtons.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>ImageButtons example</title>
    <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
    <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema
        content="http://schemas.microsoft.com/intellisense/ie5">
  </HEAD>
  <body MS_POSITIONING="GridLayout">

    <form id="Form1" method="post" runat="server">
<asp:ImageButton id=ImageButton1 style="Z-INDEX: 101; LEFT: 101px;
POSITION: absolute; TOP: 59px" runat="server"
ImageUrl="file:///C:\inetpub\wwwroot\ImageButtons\ButtonImage.jpg">
</asp:ImageButton>
<asp:TextBox id=TextBox1 style="Z-INDEX: 102; LEFT: 139px; POSITION:
absolute; TOP: 227px" runat="server" Width="223px" Height="24px">
</asp:TextBox>

    </form>

  </body>
</HTML>

And here's WebForm1.aspx.vb for the ImageButtons example:

Public Class WebForm1
    Inherits System.Web.UI.Page
    Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox
    Protected WithEvents ImageButton1 As _
        System.Web.UI.WebControls.ImageButton

#Region " Web Form Designer Generated Code "
    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough()> _
        Private Sub InitializeComponent()

    End Sub

    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As_
        System.EventArgs) Handles MyBase.Init
        'CODEGEN: This method call is required by the Web Form Designer
        'Do not modify it using the code editor.
        InitializeComponent()
    End Sub

#End Region

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As _
         System.EventArgs) Handles MyBase.Load
        'Put user code to initialize the page here
    End Sub

    Private Sub ImageButton1_Click(ByVal sender As System.Object, _
        ByVal e As System.Web.UI.ImageClickEventArgs) Handles _
        ImageButton1.Click
        TextBox1.Text = "You clicked the button at " & e.X & ", " & e.Y
    End Sub
End Class

The Click event handler for image buttons is passed an object of the ImageClickEventArgs class; you can use the X and Y members of that class to get the location at which the mouse was clicked. Here's how I display that information in a text box in the ImageButtons example:

   Private Sub ImageButton1_Click(ByVal sender As System.Object, _
       ByVal e As System.Web.UI.ImageClickEventArgs) Handles _
       ImageButton1.Click
       TextBox1.Text = "You clicked the button at " & e.X & ", " & e.Y
   End Sub

You can see the result in Figure 17.2. Image buttons are supported in HTML with <input> elements with the type attribute set to "image"; here's what the HTML looks like for the image button in Figure 17.2:

<input type="image" name="ImageButton1" id="ImageButton1"
src="ButtonImage.jpg" border="0" style="Z-INDEX: 101; LEFT: 101px;
POSITION: absolute; TOP: 59px" />