Image Server Control

If you like photo shooting this control is very important in your life, to show your photos to your friends on a web page you can use ASP Image control. It’s a simple server control where you can display your images on your Web page from the server-side code.

A typical Image control is constructed on web page as shown below.

<asp:Image ID="Image1" Width="300px" Height="300px" ImageUrl="~/Images/CoolTuts.JPG"
runat="server" />

ImageUrl is very important property in our Image Server Control. In this property I am taking a image(CoolTuts.JPG) from Images folder.

Basic Image Control Example



In the above figure I used Image Controls to display three same images with different sizes. If you want to try this just refer to below .aspx source code.

.aspx

<table width="450px">
<tr>
<td rowspan="2">
<asp:Image ID="Image1" Width="300px" ImageUrl="~/Images/CoolTuts.JPG" runat="server" />
</td>
<td>
<asp:Image ID="Image2" Width="150px" ImageUrl="~/Images/CoolTuts.JPG" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Image ID="Image3" Width="150px" ImageUrl="~/Images/CoolTuts.JPG" runat="server" />
</td>
</tr>
</table>

Its pretty easy right?

Lets work on another example using different images on one Image Control.








As you see above three Images I am using one image control and three button controls. When the user clicks on “Cooltuts Image” Image control changes to CoolTuts Image and same way other two buttons PleaseWait and Submit buttons too.

Code and functionality looks as shown below.
.aspx

<form id="form1" runat="server">
<div>
<asp:Image ID="imgMain" Width="300px" ImageUrl="~/Images/CoolTuts.JPG" runat="server" />
<br />
<asp:Button ID="btnCoolTuts" runat="server" Text="CoolTuts Image" BackColor="White" OnClick="btnCoolTuts_Click" />
<br />
<asp:Button ID="btnPleaseWait" runat="server" BackColor="White" Text="PleaseWait Image" OnClick="btnPleaseWait_Click" />
<br />
<asp:Button ID="btnSubmit" runat="server" BackColor="White" Text="Submit Image" OnClick="btnSubmit_Click" />
</div>
</form>


.cs

public partial class ImageControl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

protected void btnCoolTuts_Click(object sender, EventArgs e)
{
ReplaceImage(1);
}

protected void btnPleaseWait_Click(object sender, EventArgs e)
{
ReplaceImage(2);
}

protected void btnSubmit_Click(object sender, EventArgs e)
{
ReplaceImage(3);
}

/// <summary>
/// Replace Images According to the Button Clicks
/// </summary>
/// <param name="Number"></param>
private void ReplaceImage(int Number)
{
if (Number == 1)
{
imgMain.ImageUrl = "~/Images/CoolTuts.JPG";
ResetColor();
btnCoolTuts.BackColor = Color.Blue;
btnCoolTuts.ForeColor = Color.White;
}
else if (Number == 2)
{
imgMain.ImageUrl = "~/Images/PleaseWait.JPG";
ResetColor();
btnPleaseWait.BackColor = Color.Blue;
btnPleaseWait.ForeColor = Color.White;
}
else
{
imgMain.ImageUrl = "~/Images/Submit.JPG";
ResetColor();
btnSubmit.BackColor = Color.Blue;
btnSubmit.ForeColor = Color.White;
}
}

/// <summary>
/// Reset all buttons to Default Colors
/// </summary>
private void ResetColor()
{
btnCoolTuts.BackColor = Color.White;
btnCoolTuts.ForeColor = Color.Black;
btnPleaseWait.BackColor = Color.White;
btnPleaseWait.ForeColor = Color.Black;
btnSubmit.BackColor = Color.White;
btnSubmit.ForeColor = Color.Black;
}
}

I am using three button click events and two other functions. That’s it try this on your computer and let me know if any questions or mistakes by me through comments for this post.

Thanks
Emmaneale Mendu
Web Developer