ASP.NET Image Control Example

Image Control Example

Here we see how we can use asp.net Image control. This is a standard toolbox control.

Basic use
First create a 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>




Related asp.net examples