The Geek Diary

ASP.NET Image Control Example

by

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>

BigBird

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>

SmallBird

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>

ImageToolTip

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>

ImageBorder

You May Also Like