How to Create an Image Button in Visual Basic.NET
This tutorial will show how to create an ImageButton control in Visual Basic.NET. An ImageButton is a button presented in the form of an image that can be clicked like any button found on a web page. When the image is clicked, a click event is generated. In this tutorial we will show two examples of how to use an ImageButton control, first we will click an image of a bullseye and a label will output letting us know if we hit the bullseye or not and second we will click an image that will redirect us to another page.
Setting Up
If you have not done so already, create an empty web site. To do so, open Visual Studio and click File > New > Web Site. Using ‘Visual Basic’ as the template, select ASP.NET Empty Web Site, name the file ImageButtonControl-VB and click OK. Before we start working on the code, I recommend downloading the source code as it will contain the images we will use in the examples.
Example One
Right click the web site name, click Add New Folder, and name the folder Images. Now right click the Images folder and click Add Existing Item. Browse to the Images folder where you downloaded the source files and add the BullsEye.jpg image.
Right click the web site name and click Add New Item. Using ‘Visual Basic’ as the template, select Web Form, leave the file name as Default.aspx and click add. In the source view of Default.aspx, insert an ImageButton and Label control. Click the ImageButton template and look in the properties window. In the ImageUrl row, click the browse button to open a ‘Select Project Item’ window. Click the Images folder, select BullsEye.jpg and click OK. Remove the text from the Label control and change the ID to “lblResult”.
Output
When the center of the target is clicked, “Bullseye!” will be outputted. When any other part of the target is clicked, “You missed the bullseye!” will be outputted.
Second Example
This example will use an ImageButton control to redirect to another page. Right click the Images folder and click Add Existing Item. Browse to where you saved the source files and add the ConnectingArrows.jpg image in the Images folder. Now in the source view of Default.aspx, we will add an ImageButton control below the Label control and type Your in “Default.aspx now” to let the user know what page they are in. Make sure to connect the ImageUrl of the ImageButton to ConnectingArrows.jpg.
Now switch to design view and double click the ConnectingArrows.jpg image to generate an event in the code behind. We will use the Response.Redirect method to redirect to Default2.aspx.
Open Default2.aspx in source view and type “Your in Default2.aspx now” in the open div tags to let the user know the page has been redirected. We will also place an ImageButton control below it that will connect to the ConnectingArrows.jpg image.
Now switch to design view and double click the image to generate an event in the code behind. As before we will use the Response.Redirect method but this time we will redirect back to Default.aspx.
Run the page and click the ConnectingArrows image and it will redirect you to Default2.aspx and vice versa. This is another way to use the ImageButton control and can be used to make products appear more visually appealing to users.
Thanks for reading and make sure to download the source files to get a better understanding of how the code works.
ImageButtonControl-VB.zip
Setting Up
If you have not done so already, create an empty web site. To do so, open Visual Studio and click File > New > Web Site. Using ‘Visual Basic’ as the template, select ASP.NET Empty Web Site, name the file ImageButtonControl-VB and click OK. Before we start working on the code, I recommend downloading the source code as it will contain the images we will use in the examples.
Example One
Right click the web site name, click Add New Folder, and name the folder Images. Now right click the Images folder and click Add Existing Item. Browse to the Images folder where you downloaded the source files and add the BullsEye.jpg image.
Right click the web site name and click Add New Item. Using ‘Visual Basic’ as the template, select Web Form, leave the file name as Default.aspx and click add. In the source view of Default.aspx, insert an ImageButton and Label control. Click the ImageButton template and look in the properties window. In the ImageUrl row, click the browse button to open a ‘Select Project Item’ window. Click the Images folder, select BullsEye.jpg and click OK. Remove the text from the Label control and change the ID to “lblResult”.
Code Block
Default.aspx
Add the ImageButton and Label controls.<asp:ImageButton ID="btnTarget" runat="server" ImageUrl="~/Images/BullsEye.jpg" OnClick="btnTarget_Click" />
<br />
<br />
<asp:Label ID="lblResult" runat="server"></asp:Label>
We used over 10 web hosting companies before we found Server Intellect. They offer dedicated servers, and they now offer cloud hosting!
Now switch to design view and double click the image to create an event handler in the code behind. In this event, we will return a message to the user letting them know if they hit the bullseye or not. We will use a simple If-Else statement that will check the for the x and y coordinates at the time of the mouse click and output a message depending on the coordinates.Code Block
Default.aspx.vb
We use the coordinate on the mouse click to determine what to output in the Label control.
Protected Sub btnTarget_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles btnTarget.Click
If ((e.X > 175 And e.X < 190) And (e.Y > 175 And e.Y < 190)) Then
lblResult.Text = "Bullseye!"
Else
lblResult.Text = "You missed the bullseye!"
End If
End Sub
When the center of the target is clicked, “Bullseye!” will be outputted. When any other part of the target is clicked, “You missed the bullseye!” will be outputted.
Second Example
This example will use an ImageButton control to redirect to another page. Right click the Images folder and click Add Existing Item. Browse to where you saved the source files and add the ConnectingArrows.jpg image in the Images folder. Now in the source view of Default.aspx, we will add an ImageButton control below the Label control and type Your in “Default.aspx now” to let the user know what page they are in. Make sure to connect the ImageUrl of the ImageButton to ConnectingArrows.jpg.
Code Block
Default.aspx
Add an extra ImageButton control.<asp:ImageButton ID="btnTarget" runat="server" ImageUrl="~/Images/BullsEye.jpg" OnClick="btnTarget_Click" />
<br />
<br />
<asp:Label ID="lblResult" runat="server"></asp:Label>
<hr />
<br />
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/ConnectingArrows.jpg" />
<br />
<br />
Your in Default.aspx now
We stand behind Server Intellect and their support team. They offer dedicated servers, and they are now offering cloud hosting!
Right click the web site name and click Add New Item. Using ‘Visual Basic’ as the template, select Web Form, leave the file name as Default2.aspx, and click add.Now switch to design view and double click the ConnectingArrows.jpg image to generate an event in the code behind. We will use the Response.Redirect method to redirect to Default2.aspx.
Code Block
Default.aspx.vb
Redirect user to Default2.aspx.Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click
Response.Redirect("Default2.aspx")
End Sub
Code Block
Default2.aspx
Connecting ConnectingArrows.jpg to the ImageButton control.Your in Default2.aspx now
<br />
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/ConnectingArrows.jpg" />
Code Block
Default2.aspx.vb
Redirect back to Default.aspx.Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click
Response.Redirect("Default.aspx")
End Sub
We chose Server Intellect for its cloud hosting, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
OutputRun the page and click the ConnectingArrows image and it will redirect you to Default2.aspx and vice versa. This is another way to use the ImageButton control and can be used to make products appear more visually appealing to users.
Thanks for reading and make sure to download the source files to get a better understanding of how the code works.
ImageButtonControl-VB.zip
