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:
System.Object
System.Web.UI.Control
System.Web.UI.WebControls.WebControl
System.Web.UI.WebControls.Image
System.Web.UI.WebControls.ImageButton
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 _
ImageButton1.Click
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 _
ImageButton1.Click
If (e.X >= 100 And e.X <= 200) And (e.Y >= 50 And e.Y <= 150)
Then
Response.Redirect("http://www.microsoft.com")
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.
Comments