In this tutorial, you will learn how to turn an image into a hyperlink.
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.
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.
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:
<img src="./image.jpg" alt="Your Own Image" />
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:
<a><img src="./image.jpg" alt="Your Own Image" /></a>
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:
<a href="google.com" target="_blank">
<img src="./image.jpg" alt="Your Own Image" /></a>
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!
We used over 10 web hosting companies before we found Server Intellect. Our new server with cloud hosting,was set up in less than 24 hours. We were able to confirm our order over the phone. They responded to our inquiries within an hour. Server Intellect’s customer support and assistance are the best we’ve ever experienced.