YouTipControl Imagebutton
# ASP.NET Web Forms: ImageButton Control
The `ImageButton` control is an ASP.NET Web Server Control used to display an image that responds to click events. It functions similarly to a standard `Button` control but uses an image instead of text to trigger a postback or action.
Additionally, the `ImageButton` acts as an image map, allowing you to capture the exact X and Y coordinates where the user clicked on the image.
---
## Definition and Usage
Use the `ImageButton` control when you want a clickable graphical element on your web page. When clicked, it posts the page back to the server, triggering the `Click` or `Command` event.
Because it inherits from the `Image` class, it supports all standard image properties (such as `ImageUrl`, `AlternateText`, and `ImageAlign`) alongside standard button behaviors.
---
## Syntax
```aspx
ImageButton Control Example
```
### Code-Behind (`Default.aspx.cs`)
```csharp
using System;
using System.Web.UI;
namespace YourApp
{
public partial class Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
// The click event handler for ImageButton uses ImageClickEventArgs
// to retrieve the X and Y coordinates of the click.
protected void imgButton_Click(object sender, ImageClickEventArgs e)
{
lblMessage.Text = $"Coordinates: X = {e.X}, Y = {e.Y}";
}
}
}
```
---
## Key Considerations
1. **Image Coordinates (`ImageClickEventArgs`):** Unlike a standard `Button` click event which uses `EventArgs`, the `ImageButton` click event uses `ImageClickEventArgs`. This object contains the `X` and `Y` properties representing the pixel coordinates where the user clicked relative to the top-left corner of the image.
2. **Accessibility:** Always provide an `AlternateText` property. This ensures screen readers can describe the button's purpose to visually impaired users, and displays placeholder text if the image fails to load.
3. **Client-Side Validation:** If you use `OnClientClick` to run JavaScript before posting back, you can return `false` in your script to cancel the postback (e.g., `OnClientClick="return confirm('Are you sure?');"`).