by Niamh Brown

Created on: April 07, 2008

How to Create an Image Link

One of the most common forms of navigation in a site these days is the image link logo. Look at Helium for example. If you click the Helium logo it will take you to the home page of the site no matter where you are. In this article it will be assumed you know how to put the basics of a HTML page together and substitute any default values for that of the files/images/text you want in your page.

CREATING THE IMAGE

At first we need an image. If we follow the theme from above we can use the logo or photo you want on your website.

Inside the HTML BODY tag we will add the following line of code:

IMG src='./images/image.jpg' alt='My Logo'

The 'src' attribute of the Image Tag will be the file path on your web hosting server. The './' refers to the root directory and the 'images/image.jpg' means there is a logo/photo called 'images.jpg' in the folder 'images', which is a sub directory off the root of your hosting account. In this case we used a Relative path name based on the location of the web page itself.

The 'alt' attribute is something that is often frowned upon if not used. This helps with accessibility for your site because if an image can't be loaded or you accidentally didn't specify the correct file path then a little box will show up in place of the image with the alternative text. In this case it will say 'My Logo' but you could have it say 'home page' or the name of your company/website.

CREATING THE LINK

To create a link around the image we need to add the following code to the above:

A href='http://www.your-domain.com'IMG src='./images/image.jpg' alt='My Logo'/A

Now when you refresh your page you will see you can now click the link and it will reload your home page.

The 'href' property holds the URL to your home page, or any other page you might want to link to. In this case it was an Absolute address, which means you provided the whole URL address as compared to the relative address of the image.

FINISHING TOUCHES

In order to make it look really professional we can do a few more things. Firstly I assumed you will wanted the logo in the top left corner of the page, but you can change the alignment properties to suit your needs. To do this we can use the DIV tag as such:

DIV align=centerA href='http://www.your-domain.com'IMG src='./images/image.jpg' alt='My Logo'/A/DIV

Also you may notice that your linked image has a border around it, which is blue when you haven't clicked it but turns purple when you have. This is the the same as when you click a text link, however most people don't want it around images. In this case will will need to modify the image tag like so:

DIV align=centerA href='http://www.your-domain.com'IMG src='./images/image.jpg' alt='My Logo' border='0'/A/DIV

By setting the image 'border' attribute to 0 we remove it altogether. There you have it you very own image link logo!

FURTHER INFORMATION

http://www.w3schools.com/HTML/html_links. asp

Learn more about this author, Niamh Brown.
Click here to send this author comments or questions.