Web Forms - Working with ASP.NET server controls

Using Image Buttons

Image controls let you display static images, but not all images are static in Web pages; some are interactive. For example, Web pages can support image maps—those clickable images with "hotspots" that, when clicked, will cause something to happen, as well as images that act like buttons when you click them. You can support those kinds of interactive images with image buttons.

Image controls are supported in HTML with HTML <img> elements, but image buttons use HTML <input> elements where the type attribute is set to "image" (in other words, an HTML image map). As with other Web server controls, image buttons support both Click and Command events. You can see an image button at work in Figure 14.2, where the ImageButton example in the code for this book is displaying the location of the mouse when you click the image.

Figure 14.2

The ImageButton example.

Here's the HTML created to support the image button you see in Figure 14.2; the image here is stored in the file map.jpg, which also comes with the code for this book:

<input type="image" name="ImageButton1" id="ImageButton1"
src="file:///C:\inetpub\wwwroot\ImageButton\map.jpg" border="0"
style="Z-INDEX: 102; LEFT: 2px; POSITION: absolute; TOP: 90px" />

Image buttons are supported with the System.Web.UI.WebControls.ImageButton class; here is the hierarchy of this class:


You can find the significant public properties of System.Web.UI.WebControls.ImageButton objects in Table 14.2 and the significant public events in Table 14.3. (This class has no non-inherited methods.) Note that as with other Web server controls, these tables do not list the significant properties, methods, and events this class inherits from the Control and WebControl classes—you can find them in Tables 12.1 to 12.5. Note also that this class inherits from the System.Web.UI.WebControls.Image class as well; you can find the public properties of that class in Table 14.1.

Table 14.2 Significant Public Properties of ImageButton Objects

Property Means
CommandArgument Returns or sets an (optional) value holding text associated with the command given by the CommandName property.
CommandName Returns or sets the command name for this image button. If you assign a value to this property, the Command event occurs when the button is clicked.

Table 14.3 Significant Public Events of ImageButton Objects

Method Means
Click Occurs when the image button was clicked.
Command Occurs when the image button was clicked and the CommandName property holds some text—use a Command event handler to handle this one.

Image buttons are images that also support Click events. When you handle Click events in image buttons, you are passed the location of the mouse in the image in an ImageClickEventArgs object; that location is what you need when you want to create an image map that the user can click to perform some action.

The position of the mouse is stored in pixels; the origin, (0, 0), is at the upper-left corner of the image. Here's how the ImageButton example displays the coordinates in the image at which the user clicked the mouse:

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

You can see the results in Figure 14.2. Image maps often let the user navigate to a new URL when you click a "hotspot" in them, and you can handle that with the Response object's Redirect method. (See "Creating a Multiform Web Application" in Day 11, "Creating Web Forms with ASP.NET," for more on the Redirect method.) Here's an example that makes the browser navigate to http://www.microsoft.com when the user clicks a region of the image—the rectangle stretching from (100, 50) to (200, 150)—which we'll treat as a hotspot:

Private Sub ImageButton1_Click(ByVal sender As System.Object, _
ByVal e As System.Web.UI.ImageClickEventArgs) Handles _
  If (e.X >= 100 And e.X <= 200) And (e.Y >= 50 And e.Y <= 150) Then
  End If

End Sub

You can also use the Command event handler to make the ImageButton control work like command buttons. In particular, you can connect a command name to the image button with the CommandName property, and the CommandArgument property can also be used to pass additional information about the command. Here's how you might put that to work in code:

Private Sub ImageButton1_Command(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.CommandEventArgs) _
Handles ImageButton1.Command
  If e.CommandName = "NavigateButton" Then
    TextBox1.Text = e.CommandArgument
  End If
End Sub

As with image controls, you can 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 can also set the ImageUrl property at runtime; just assign it a string containing the URL of the image you want to use. You can also set the image's width and height with the Width and Height properties.

That's it for image controls and buttons. There are only a few ways to display images in Web pages that browsers will understand, and we've covered them now—the background property of Web forms that let you set background images, image controls that translate into HTML <img> elements, and image buttons that translate into HTML <input type = "image"> elements. Next, we'll take a look at Web server list controls.

You might also like...



Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter” - Eric Raymond