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”.

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.

Output

image button 1

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.

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.

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.

Output

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.

image button 2

Thanks for reading and make sure to download the source files to get a better understanding of how the code works.

Download Source Files