So, you want to use an image as a link? Here's how...

Hot Links are simply hyperlinks that use an image instead of text. They are so incredibly simple that this page is really very short - perhaps this will be a relief to know! All you need to do is create an image you want to have as a hot link remembering to adjust it to the size you want on your web page in your image program, and also making sure the file size is small enough so that it is very quick to download (so user's don't have to wait a while before they actually see it!). Then you have to store it on the right part of your hard drive (or web server's hard drive) and then link to it using that path, then insert the <A href...> and </a> hyper link code around the image code.

You have noted the wooden-looking arrows on the bottom of each of these pages? Well these are hot links that take you either to the next, previous or home page of this HTML Tutorial. As such, they serve as a great example of simple hot link code. I will show you the code for the previous page arrow:

<A HREF="HTMLpage3-2.htm" TARGET="_top"><IMG SRC="Assets/d-woodbck.jpg" ALT="Back"></A>

And this looks like...

Note the use of the directory "Assets" - just like section "2.5 Inlining Images" when I said it was a good idea to keep all your image files in one directory, and the rules of getting to that image (i.e. coding the path) are exactly the same as per that section, i.e. use of as many "../../" as you need to get back to the Assets directory if the page you are coding with the link is in a different sub-directory.

But what about that horrid border around the graphic? Unfortunately, web browsers do this by default for any images used as links unless you tell them not to. How do you do this? Have a look at the code below and note the use of the BORDER attribute - that's what tells the browser to quit doing the border thing. Of course you can also use this to make the border wider if you want to!

<A HREF="HTMLpage3-2.htm" TARGET="_top"><IMG SRC="Assets/d-woodbck.jpg" border="0" ALT="Back"></A>

And this looks and does this...(if you click on it!)

...and yipee, no border! Anyway, all the above is fine for internal links. What about external links? You just tailor your "<A href..." stuff accordingly:

<A HREF="http://www.didilogix.com/HTMLTutorial/HTMLpage3-2.htm" TARGET="_blank">
<IMG SRC="Assets/d-woodhm.jpg" ALT="home page"></A>

And this looks and does this...(if you click on it!)

Note the use of the TARGET attribute in the external hot link example above - this (as per the previous page) ensures that the thing being linked to opens up in a new window leaving your own web site open in the original window and is normally what is always done with external links.

You can use people's logos as hot-links, though there can sometimes be copyright restrictions regarding this. Indeed, many sites actually tell you which graphic to save to your disk (often they even go so far as to make the size perfect for use as a hot-link). Wise Webmasters indeed....for in their wisdom they know that a hot-link looks better than a text link. They also know that by encouraging others to set up attractive looking hot-links on their sites (often amongst the plain text links to other people's web sites) they stand to increase their own site traffic as a result as it has been found that user's will more likely click an image link rather than a text link! Worth bearing in mind...

So, think twice before being overly copyright conscious about your logo. It may pay you to encourage people to use it as a link to your site - even better if you provide people with one that is the right size already so they can just download it and make the link. You can download my logo below for use as a link if you want! All you have to do to save it to your disk is right-click on it and select Save As - just make sure you store it in the right place on your hard drive otherwise your link might not work!

Once you have saved that image, then all you need to do is insert the following code on the page you want this link to appear:

<A HREF="http://www.didilogix.com/HTMLTutorial/HTMLindex.htm" TARGET="_blank">
<IMG SRC="Assets/didilogixcomthb.jpg" ALT="didilogix.com HTML Tutorial" BORDER="0"></A>

Which looks and does this...(if you click on it!)

Obviously you may need to change the path from Assets/didilogixcomthb.jpg to wherever you have stored the image and change the name to whatever you have called it! So, that's all there is to hot links!

NEXT: what about a more complex image that you want to have bits of it linking to different pages...