Beginning: Making Images into Links

In past tutorials we have discussed how to create links and how to insert images into web pages. Now it's time to combine the two, and learn how to make your images into links. Why would you want to do that? Well, there are several good reasons, but in this tutorial we'll focus on two: thumbnails and navigation buttons.

Getting Started:

How do I make an image into a link?
How do I make thumbnails?
How do I make navigation buttons?

How do I make an image into a link?

Making images into links is a simple process. However, first you should understand how to create links and how to insert images into web pages. If you would like help with creating links, click here. If you would like to learn about adding images to your site, click here. If you already know how to do all of that, great! Let's jump right in.

First, let's create a hyperlink tag. We'll use a link to the Freeservers home page as an example: <A HREF="http://www.freeservers.com">. Everything here looks normal, right? Now for the catch. Instead of entering text, like Go To Freeservers, you enter the HTML code for an image. For example: <IMG SRC="freeservers.gif">. Then close your hyperlink code with the </A> tag. That's all it takes. Now, when someone clicks on your freeservers.gif image, their browser will automatically load the Freeservers home page. Here is what the complete code looks like:

<A HREF="http://www.freeservers.com"><IMG SRC="freeservers.gif"></A>

Here is what the finished product looks like:

If you click on the above logo, you will be taken to the Freeservers home page.

How Do I Make Thumbnails?

First, let's define the word "Thumbnail." A thumbnail is an image that has been reduced in size, so that it loads quicker. The smaller an image is, the faster it loads into a browser, and fast loading pages are every web master's goal. So, if you have a lot of pictures to show on your website, or you have exceptionally large pictures, then making them into thumbnails will keep your load time down. Your visitors can then click on the thumbnails (since you know how to make your images into links) and see the full image.

Here's how it works. First, take an image that you would like on your web site and open it in your favorite image editing program. Make the image as small as you would like, then save it. HOWEVER, it is very important that you name the image something else when you save it. Otherwise you will write over the top of your original image, wich will destroy the original. Here is an image that I have reduced in size:

However, this image is much too small for anyone to really appreciate it. So, I will make the image into a link, which then links to a page with the full-sized image, like so:

<A HREF="fullsized.html"><IMG SRC="thumbgeyser.jpg"></A>.

Click on the above image to see how it all works.

How Do I Make Navigation Buttons?

Another handy use of linked images is the ability to make navigation buttons. I'm sure you've seen them before. They generally look something like this: and , and you can click them to go forward or back in a web site (arrows courtesy of www.wilsoninfo.com). Well, in order to create navigational buttons like these, you do the same thing to your back and forward buttons that you did for the thumbnails: make your images into links. For example:

<A HREF="home.html"><IMG SRC="back.gif"></A>

will send your visitors back to your home page. Using navigational buttons makes your page easy to get around in and can add some life to your web site.

Well, that's all it takes to make your images into links. Try out different ways to use images as links in your site, and you may be surprised at what a difference linked graphics can make to the visual appeal of your site.