by Alex Landis

Created on: April 09, 2008

How to create an image link

Images and links have been commonplace in web sites almost since HTML was invented. If you are new to HTML and Web Design you may have asked yourself if it is possible to add an image to a webpage that when a person clicks on it, it will link to another webpage or website. Good news! You can make an image on your webpage a link.

It's very simple to do. Here's how:

1. Get an image!

If you don't already have an image you want to turn into a link, you'll need to get one. It is recommended that you use images that you created, but any image will work for the link. Once you've found an image you'll need to add it onto your web page.

2. Add your image onto your webpage

In order to add the image onto your webpage, you'll need to open the file in a text editor such as Notepad for PC or TextEdit for MAC. Next, add the IMG HTML code onto your webpage:

< img src="url" / >

"url" - needs to be changed to the URL or file location of your image.

3. Turn your Image into a link

Now that you have your image on your webpage it's time to turn it into a link. To do so, we need to surround the previous image html code with HTML link code. Add the code onto your webpage:

< a href="url" > < /a >

"url" - needs to be changed to the web site address your a linking to.

Once you add the code to your web page, and surround the image code, the completed HTML image link code should look like this:

< a href="url" > < img src="url" > < /a >

4. Tips & Suggestions

TIP #1! - Use Alternate Text! Some mobile phones, handhelds, and browsers made for the blind don't display images, so use the alternate text attribute to display a description of the image if and when the images doesn't show up.

To add alternate text to your images, add this code to them:

alt="Image Description"

Change "Image Description" to the description of your image. The complete image code will look like this:

< img src="url" alt="Image Description" / >

TIP #2! Add Width & Height Values! A browser doesn't know the size of image until it loads, but this could take time, and mess up your layout until it does load. By adding width and height values to the image, the browser knows what size it is, and you layout will be correct even when the image hasn't loaded yet!

To add width and height values to your images, add this code to them:

width="x" height="x"

Change "x" to the correct width or height value in pixels. The complete image code will look like this:

< img src="url" width="x" height="x" / >

TIP #3! Open in a New Browser Window! Sometimes when you create links to other web sites, you won't the link to open the linked web site into a new browser, that way your site is still active.

To make sure your links to other sites open in a new window, add this code to them:

target="_blank"

When added to a linked image the code will look like this:

< a href="url" target="_blank" > < img src="url" > < /a >

Now you should be well on your way to turning images into links!

Learn more about this author, Alex Landis.
Click here to send this author comments or questions.