Image Buttons

You use image buttons to display an image that responds to mouse clicks. This control is supported with <input> HTML elements where the type attribute is set to "image" (in other words, an image map). As with other Web server controls, image buttons support both Click and Command events.

When you handle Click events, you are passed the actual location of the mouse in the image, which is great when you want to create an image map where the user can click various parts of an image and your code undertakes appropriate action. The position of the mouse is recorded in pixels, and the origin (0, 0) is at the upper-left corner of the image.

You can use Command event handlers to make the ImageButton control work like command buttons. That is, you can associate a command name with the control by using the CommandName property. And the CommandArgument property also can be used to pass additional information about the command.

You can see an image button at work in Figure 17.2, where the ImageButtons example on the CD-ROM is displaying the location of the mouse when you click the image.

Figure 17.2: Using an image button.

Here's the HTML created to support the image button you see 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" />