The Image control supports the following properties (this is not a complete list):
- AlternateText — Enables you to provide alternate text for the image (required for accessibility).
- DescriptionUrl — Enables you to provide a link to a page that contains a detailed description of the image (required to make a complex image accessible).
- GenerateEmptyAlternateText — Enables you to set the AlternateText property to an empty string.
- ImageAlign — Enables you to align the image relative to other HTML elements in the page. Possible values are AbsBottom, AbsMiddle, Baseline, Bottom, Left, Middle, NotSet, Right, TextTop, and Top.
- ImageUrl — Enables you to specify the URL to the image.
Image Control Example
Here we see how we can use asp.net Image control. This is a standard toolbox control.
Basic use
First, create an Images folder in your Solution Explorer. Then store your image here. After this create a web form name Default.aspx. The Default.aspx code is below.
<%@ Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Asp.Net Image Control Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Bird1.jpg" />
</div>
</form>
</body>
</html> Sizing the Image
You see the image is big.You can easily change the image size. The code is here.
<form id="form1" runat="server"> <div> <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Bird1.jpg" Width="400" Height="400" /> </div> </form>
Show the ToolTip
For showing a ToolTip just add a ToolTip property. The code is here.
<form id="form1" runat="server"> <div> <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Bird1.jpg" Width="400" Height="400" ToolTip="Beautiful Bird" /> </div> </form>
Add a Border
If you want then you can insert a border in your image. The final code is here.
<%@ Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Asp.Net Image Control Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image
ID="Image1"
runat="server"
ImageUrl="~/Images/Bird1.jpg"
Width="400"
Height="400"
ToolTip="Beautiful Bird"
BorderWidth="3"
BorderStyle="Solid"
BorderColor="Crimson"
/>
</div>
</form>
</body>
</html>