Home > Web Info > Webmaster Tutorials
How To Make A Link With A Pic
by William Bryan Boyd


In the first link tutorial we discussed text links. In this tutorial we will be looking at some ways to make image links. Turn any pic into a link just just by adding a little extra code.

Here is a basic image link:
<a href="http://funtimehosting.com"><img src="http://funtimehosting.com/ad.gif"></a>

The part that says <img src="http://funtimehosting.com/ad.gif"> is the label. This is the visible image that is displayed on the web page. In this case the picture is located on the funtimehosting.com website. You can use whatever image you want for the label in an image link, and call it from any website. Be careful though. Most people don't like you linking to images on their website. It uses up bandwidth on their server.

The part between the quotation marks, "http://funtimehosting.com" is the page that will be called and displayed when you click on the image.

Here is how the image link code above appears on this web page. It's an animated banner image advertising my Funtime Hosting Website. If you click on it, it will take you to http://funtimehosting.com .

They call the website addressess in the above link absolute url's, because they give the entire url path. In this case it's another website.

Now suppose there is an image in this same folder of my website that this web page you're reading is located, and I want to display this image on this web page. In this case I will use the same image I used above, but I will call it from this folder in this website, since I uploaded it here as well. I need only to use the file name, "ad.gif". This is called a relative url or file:
<a href="http://funtimehosting.com"><img src="ad.gif"></a>

You can also call a relative url in the location part of the link. Suppose I want to display a page that is located in this same folder this web page you are reading is located. Here's how the code might look:
<a href="funtime.html"><img src="ad.gif"></a>

Here's how the image link might look. If you click on it, it will take you to a page on this website I made for an example.

Well, this concludes this tutorial. Study it awhile and hopefully you will get it.

If you are using one of the following free web page makers, you can copy and paste the code above in the paragraph or code spaces.

Web Page Maker 2

Web Page Maker 1

Back - How To Make A Text Link


William Bryan Boyd is the author of several online webmaster tutorials featured at http://williambryan.com. He is the developer of the popular, Web Page Maker 2, a free web page maker with many great features.


WEBMASTERS: THIS TUTORIAL MAY BE DISTRIBUTED FREELY, IF THE AUTHORS BOX IS INCLUDED IN EVERY COPY.




Copyright © 2000-2010 William Bryan Company
Home | Web Info | Games | Free Greeting Cards | Contact