How to Use an Image for a Link

Creating an image link is almost the same as creating a text link. The differences are that you substitute an image in place of the link text; and most webmasters will remove the link border from the image so it doesn't detract from the image. The only time you might not want to remove the border is when it isn't obvious that the image is a link.

How to Code the Image Link

<a href="page.html">
<img src="image.jpg" 
 width="120" height="35" 
 style="border: 0px;" 
 alt="Link Description" />
</a>

As you can see, it's a standard link with an image used in place of link text. You'll need to change a few things in the example above for your own use:

In the first line, change page.html to the name of the page that the link should point to.
In the second line, change "image.jpg" to the name of your link image. Be sure to include the path to the image if you keep it in a different folder than the HTML page is in.
In the third line change the width and height to the actual size of your image.
The fourth line removes the border from the image. Remove this line if you want a border, or change the number from zero to any reasonable positive integer.
In the fith line change the alt text value to a description of the page the link leads to.
The last line closes the link.

That's all there is to it. Don't forget to link to Boogie Jack's so others may be helped as you have been! That's what it's all about, helping each other.

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]