Using the Image Button




Notes:

  1. Only thing that bugs me with this example is I usually never use the "Width" or "height" attributes. I do everything with CSS. Even though .NET 2005 will translate the With and Height attributes to a proper Style attribute, it's still something that could be handled with CSS classes.


Front end code

            <h1>Using the Image Button</h1>

            <hr />

            <asp:ImageButton ID="imgClick" runat="server" ImageUrl="~/Images/tiedye.gif" width="180" Height="180" OnClick="imgClick_Click" />

            <br />

            <asp:Literal ID="litOutput" runat="server" />


Source Code.

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

namespace BicNet.Projects.mcp.chapter4

{

    public partial class ImageButtonClick : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

 

        }

        protected void imgClick_Click(object sender, ImageClickEventArgs e)

        {

            double dblXOffset, dblYOffset, dblX, dblY, dblRadius;

            string strMessage;

            //Calcualte the radius of the click from X and Y

            dblXOffset = imgClick.Width.Value / 2;

            dblYOffset = imgClick.Height.Value / 2;

            dblX = Math.Abs((e.X) - dblXOffset);

            dblY = Math.Abs((e.Y) - dblYOffset);

            dblRadius = Math.Sqrt(Math.Pow(dblX, 2) + Math.Pow(dblY, 2));

 

            if (dblRadius < 22)

                strMessage = "on center circle.";

            else if ((dblRadius >= 22) && (dblRadius <= 42))

                strMessage = "On Second Circle";

            else if ((dblRadius >= 42) && (dblRadius <= 64))

                strMessage = "On Third Circle";

            else if ((dblRadius >= 64) && (dblRadius <= 86))

                strMessage = "On Fourth Circle";

            else

                strMessage = "outside the circle.";

            //Display the message

            litOutput.Text = "you clicked " + strMessage;

 

        }

    }

}