Image Button to Change Background

Shaili Dashora
10y
22.2k
0
3

Article

Introduction

This article describes image button.In this article you will see what is a image button control and how it is use to change background, how to change background color from single image button.

Image Button

The image button is used to display a clickable image,and a control that displays an image and responds to mouse clicks on the image.

Before proceding further let's look at the procedure of adding image button from Visual Studio toolbox to web form and how to find Coordinate(x,y) by image button.

Step-by-step creation of a Image button to change background

Step 1: Open Visual Studio 2010.

Step 2: Then click on "File" > "New" > "Project" ( or press "Ctrl +Shift + N").

Step 3: Then select Empty Project, provide the name of the project and click on OK.

Step 4: Now right-click on the project in Solution Explorer then click on "Add New Item".

Step 5: Add a Web Form and provide a name for the Web Form, for example "Backgroundchanging.aspx".

After adding the Backgroundchanging.aspx webform you will see the following code

<%@ Page Language="C#" AutoEventWireup="true"CodeBehind="Backgroundchanging.aspx.cs" Inherits="imagebutton.Backgroundchanging" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
</form>
</body>
</html>

Step 6: Now in Visual Studio just drag and drop the " imagebutton" and from the toolbox inside the Form tag add the following code

<form id="form1" runat="server">
<div>
<asp:ImageButton ID="imgbtnbackground" runat="server" />
</div>
</form>

Step7: Now provide some properties for the image button,and create one folder inside project and give name as image and put image that you want to set as a image button. Click on properties window or press f4 key and provide properties of imagebutton by following steps.

Now provide height and width property of image button.

Now provide Image Url property of imagebutton and set image on imagebutton.

Step8:Now inside the form tag add two lable control using the following code or just drag and drop the lable from the Toolbox.

I am also providing some of the properties of the lable as you can see in the following code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Backgroundchanging.aspx.cs" Inherits="imagebutton.Backgroundchanging" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblimage" runat="server" ForeColor="#000066"
style="font-style: italic; text-decoration: underline; font-size: large; font-weight: 700"
Text="Wellcome To Application"></asp:Label>
<br />
<br />
<asp:ImageButton ID="imgbtnbackground" runat="server" Height="297px"
ImageUrl="~/image/imagebutton2.png" onclick="imgbtnbackground_Click"
Width="473px" />
<br />
<asp:Label ID="lblbackground" runat="server"></asp:Label>
</div>
</form>
</body>
</html>

Now I am explaining how to find coordinate of perticuler area of image button .when we click on perticuler area of color on image button,

we get x and y coordinate range,by writing following code on "Backgroundchanging.aspx.cs".

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace imagebutton
{
public partial class Backgroundchanging : System.Web.UI.Page
{
protected void imgbtnbackground_Click(object sender, ImageClickEventArgs e)
{
lblbackground.Text = e.X + " " + e.Y;
}
}
}

After getting coordinates we will write following code on click event of imagebutton.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace imagebutton
{
public partial class Backgroundchanging : System.Web.UI.Page
{
protected void imgbtnbackground_Click(object sender, ImageClickEventArgs e)
{
lblbackground.Text = e.X + " " + e.Y;
if (e.X > 4 && e.X < 154 && e.Y > 3 && e.Y < 145)
{
Session["color"] = "red";
Response.Redirect("Background_image.aspx");
}
else if (e.X > 160 && e.X < 312 && e.Y > 3 && e.Y < 145)
{
Session["color"] = "yellow";
Response.Redirect("Background_image.aspx");
}
else if (e.X > 314 && e.X < 468 && e.Y > 3 && e.Y < 145)
{
Session["color"] = "purple";
Response.Redirect("Background_image.aspx");
}
else if (e.X > 8 && e.X < 153 && e.Y > 152 && e.Y < 288)
{
Session["color"] = "green";
Response.Redirect("Background_image.aspx");
}
else if (e.X > 157 && e.X < 312 && e.Y > 152 && e.Y < 288)
{
Session["color"] = "blue";
Response.Redirect("Background_image.aspx");
}
else if (e.X > 315 && e.X < 467 && e.Y > 152 && e.Y < 288)
{
Session["color"] = "pink";
Response.Redirect("Background_image.aspx");
}
}
}
}

Now again we have to add one more webform,by using this webform we can see changes on background color by clicking on imagebutton.

Step 1: Now right-click on the project in Solution Explorer then click on "Add New Item".

Step 2: Add a Web Form and provide a name for the Web Form, for example "Background_image.aspx".

After adding webform write following code on the source code of Background_image.aspx page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Background_image.aspx.cs" Inherits="imagebutton.Background_image" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#form1
{
height: 662px;
width: 1300px;
}
</style>
</head>
<body runat="server" id="pageBody">
</body>
</html>

Now we will write following code on the PageLoad event of webform Background_image.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;
namespace imagebutton
{
public partial class Background_image : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Session["color"] != null)
{
if (Session["color"].ToString() == "red")
{
pageBody.Attributes.Add("bgcolor", "red");
}
else if (Session["color"].ToString() == "yellow")
{
pageBody.Attributes.Add("bgcolor", "yellow");
}
else if (Session["color"].ToString() == "purple")
{
pageBody.Attributes.Add("bgcolor", "purple");
}
else if (Session["color"].ToString() == "green")
{
pageBody.Attributes.Add("bgcolor", "green");
}
else if (Session["color"].ToString() == "blue")
{
pageBody.Attributes.Add("bgcolor", "blue");
}
else if (Session["color"].ToString() == "pink")
{
pageBody.Attributes.Add("bgcolor", "pink");
}
else
{
Response.Write("<script> alert('PLEASE SELECT COLOR')</script>");
Thread.Sleep(50000);
Server.Transfer("imagebutton.aspx");
}
}
}
}
}

Now all the work has been done, just run the project and see the output by using following steps.

Step1:-Right click on webform "Backgroundchanging.aspx" in Solution Explorer and click on option Set As Start Page.

Step2:-Now click on Debug option and see output.

Now we will see how to change background color by imagebutton ,Click on perticuler color area of imagebutton,you will redirect to another page and change background of page.

For example you click on red color area of imagebutton(Backgroundchanging.aspx) then it redirect to another page(Background_image.aspx) and change background color of page as red color.

For example you click on green color area of imagebutton(Backgroundchanging.aspx) then it redirect to another page(Background_image.aspx) and change background color of page as green color.

For example you click on yellow color area of imagebutton(Backgroundchanging.aspx) then it redirect to another page(Background_image.aspx) and change background color of page as yellow color.

For example you click on blue color area of imagebutton(Backgroundchanging.aspx) then it redirect to another page(Background_image.aspx) and change background color of page as blue color.

For example you click on purple color area of imagebutton(Backgroundchanging.aspx) then it redirect to another page(Background_image.aspx) and change background color of page as purple color.

For example you click on pink color area of imagebutton(Backgroundchanging.aspx) then it redirect to another page(Background_image.aspx) and change background color of page as pink color.

Up Next

Ebook Download

View all

ASP.NET MVC 5 Recipes: A Practical Solution

Read by 9.3k people

Download Now!

Learn

View all