ASP.NET

Image Button to Change Background

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
 
  1. <%@ Page Language="C#" AutoEventWireup="true"CodeBehind="Backgroundchanging.aspx.cs" Inherits="imagebutton.Backgroundchanging" %>   
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  3. <html xmlns="http://www.w3.org/1999/xhtml">   
  4. <head runat="server">   
  5.  <title></title>   
  6. </head>   
  7. <body>   
  8.  <form id="form1" runat="server">   
  9.  </form>   
  10. </body>   
  11. </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
  1. <form id="form1" runat="server">  
  2.     <div>  
  3.        <asp:ImageButton ID="imgbtnbackground" runat="server" />  
  4.        </div>  
  5.     </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:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Backgroundchanging.aspx.cs" Inherits="imagebutton.Backgroundchanging" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <div>  
  12.       
  13.         <asp:Label ID="lblimage" runat="server" ForeColor="#000066"   
  14.             style="font-style: italic; text-decoration: underline; font-size: large; font-weight: 700"   
  15.             Text="Wellcome To Application"></asp:Label>  
  16.         <br />  
  17.         <br />  
  18.         <asp:ImageButton ID="imgbtnbackground" runat="server" Height="297px"   
  19.             ImageUrl="~/image/imagebutton2.png" onclick="imgbtnbackground_Click"   
  20.             Width="473px" />  
  21.       
  22.         <br />  
  23.         <asp:Label ID="lblbackground" runat="server"></asp:Label>  
  24.       
  25.     </div>  
  26.     </form>  
  27. </body>  
  28. </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".
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. namespace imagebutton  
  8. {  
  9.     public partial class Backgroundchanging : System.Web.UI.Page  
  10.     {  
  11.         protected void imgbtnbackground_Click(object sender, ImageClickEventArgs e)  
  12.         {  
  13.             lblbackground.Text = e.X + " " + e.Y;  
  14.          }  
  15.     }  
  16. }  
   
 
 
 
 
After getting coordinates we will write following code on click event of imagebutton.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. namespace imagebutton  
  8. {  
  9.     public partial class Backgroundchanging : System.Web.UI.Page  
  10.     {  
  11.       protected void imgbtnbackground_Click(object sender, ImageClickEventArgs e)  
  12.         {  
  13.             lblbackground.Text = e.X + " " + e.Y;  
  14.             if (e.X > 4 && e.X < 154 && e.Y > 3 && e.Y < 145)  
  15.             {  
  16.                 Session["color"] = "red";  
  17.                 Response.Redirect("Background_image.aspx");  
  18.             }  
  19.             else if (e.X > 160 && e.X < 312 && e.Y > 3 && e.Y < 145)  
  20.             {  
  21.                 Session["color"] = "yellow";  
  22.                 Response.Redirect("Background_image.aspx");  
  23.             }  
  24.               else if (e.X > 314 && e.X < 468 && e.Y > 3 && e.Y < 145)  
  25.             {  
  26.                 Session["color"] = "purple";  
  27.                 Response.Redirect("Background_image.aspx");  
  28.             }  
  29.              else if (e.X > 8 && e.X < 153 && e.Y > 152 && e.Y < 288)  
  30.             {  
  31.                 Session["color"] = "green";  
  32.                 Response.Redirect("Background_image.aspx");  
  33.              }  
  34.             else if (e.X > 157 && e.X < 312 && e.Y > 152 && e.Y < 288)  
  35.             {  
  36.                 Session["color"] = "blue";  
  37.                 Response.Redirect("Background_image.aspx");  
  38.             }  
  39.             else if (e.X > 315 && e.X < 467 && e.Y > 152 && e.Y < 288)  
  40.             {  
  41.                 Session["color"] = "pink";  
  42.                 Response.Redirect("Background_image.aspx");  
  43.             }  
  44.           }  
  45.      }  
  46. }  
 
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.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Background_image.aspx.cs" Inherits="imagebutton.Background_image" %>  
  2.   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3.   <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.         #form1  
  8.         {  
  9.             height: 662px;  
  10.             width: 1300px;  
  11.         }  
  12.     </style>  
  13. </head>  
  14. <body runat="server" id="pageBody">  
  15.  </body>  
  16. </html>  
 Now we will write following code on the PageLoad event of webform Background_image.aspx.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Threading;  
  8. namespace imagebutton  
  9. {  
  10.     public partial class Background_image : System.Web.UI.Page  
  11.     {  
  12.         protected void Page_Load(object sender, EventArgs e)  
  13.         {  
  14.             if (Session["color"] != null)  
  15.             {  
  16.                 if (Session["color"].ToString() == "red")  
  17.                 {  
  18.                     pageBody.Attributes.Add("bgcolor", "red");  
  19.                 }  
  20.                 else if (Session["color"].ToString() == "yellow")  
  21.                 {  
  22.                     pageBody.Attributes.Add("bgcolor", "yellow");  
  23.                 }  
  24.                 else if (Session["color"].ToString() == "purple")  
  25.                 {  
  26.                     pageBody.Attributes.Add("bgcolor", "purple");  
  27.                 }  
  28.                 else if (Session["color"].ToString() == "green")  
  29.                 {  
  30.                     pageBody.Attributes.Add("bgcolor", "green");  
  31.                 }  
  32.                 else if (Session["color"].ToString() == "blue")  
  33.                 {  
  34.                     pageBody.Attributes.Add("bgcolor", "blue");  
  35.                 }  
  36.                 else if (Session["color"].ToString() == "pink")  
  37.                 {  
  38.                     pageBody.Attributes.Add("bgcolor", "pink");  
  39.                 }  
  40.                  else       
  41.                 {  
  42.                     Response.Write("<script> alert('PLEASE SELECT COLOR')</script>");  
  43.                     Thread.Sleep(50000);  
  44.   
  45.                     Server.Transfer("imagebutton.aspx");  
  46.                 }  
  47.             }  
  48.         }  
  49.     }  
  50. }  
 
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
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs