In this tutorial, you will learn how to turn an image into a hyperlink.

Setup

This tutorial was written using Visual Studio 2010. Visual studio is available for free in its express edition to the public. Just go to Microsoft.com/Visual Studio. Go ahead and open up visual studio or your favorite text editor. Save this project with the name of your choice.

Step 1: The Image

Save an image of any kind into the folder where your website is saved. Make sure to take note of its name and file extension (.jpg, .png, etc.). In your code, make sure you have placed the appropriate html tags.

Step 2: The HTML

Inside your body tags, go ahead and place an opening div tag and a closing div tag. Inside those div tags, we are to place an image. Your code should appear as follows:

Note that “./” means this folder. We will discuss folder paths in another tutorial. Where “Your Own Image” is placed, there should be an alternative text for your image in the case it is not displayed.
Save and run your program, or open the file in a browser, depending on what you are using. You should see your image. Now for the link code. Change your code to add the opening and closing link tags to enclose the image code like so:

At this point, we need to add the site being referenced and whether or not the link is to open in a new window or in the tab currently opened. In the opening link tag, type in href=”http://www.google.com/” or the site of your choice and type in target=”_blank” or “_self”. Blank will open it in a new window and self will open it in the current tab.
Your code should now look like so:

Save and open your page in a browser. You will come to find that you are now able to click on the image and it takes you to Google, or if you placed a different site, then your site of preference will appear.

A Few Last Words

You can resize your image and have it connect to pages within your site. Many things can be applied to image links; you will come to find this method of hyperlinks a bit more attractive than text links. You can always manipulate your images to have borders, different size or even a decoration of some sort. Anything is possible. Join us next time for more tutorials. See you then!

Download Source Files