Search Helium

Home > Computers & Technology > Internet > Web Design

How to create an image link

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.

Helium Debate

Cast your vote!

Should web content be free?

Click for your side.

262597

Featured Partner

Tomorrow's Peacekeepers Today

Tomorrow's Peacekeepers Today's short-term mission is to provide vital security information to non-government organizations (NGOs) and recommendations on how to protect third-party nationals while on the ground in foreign countries.more


CONNECT WITH US

Read
our blog
Helum for writers

Write and get published
Share with other writers
Polish your freelancing skills

Join our active writing community
Helium Content Source for Publishers

Quality articles from proven freelancers
Exclusive rights, fast turnaround
Brand engagement, business blogging -- our writers do it all

Get custom content today!

INFORMATION


Helium, Inc.
200 Brickstone Square Andover, MA 01810 USA
#