Adding a Link to an Image in HTML

When creating an online store, "about me" profiles or other pages, it may be necessary to show thumbnail images of a product or person as a preview of the page. It may be useful to make the image "clickable" or add a link to the image. Adding a link to an image requires the knowledge of both link tags and image tags.

First let's create the code to insert an image of a dog that would be held within an images file of our site. The image file name is dog.jpg and the alternate text will be dog. The dimensions of the image itself is 1000 x 1000 pixels and we want to link it directly to the original image so readers would click the thumbnail to view the actual image as it is. The thumbnail dimensions are 100 x 100 pixels. First we would create the image tag as shown below...

After inserting the image into the website you can then insert the link. To do so you first insert the opening tag in front of the image tag. The link will lead directly to the file "images/dog.jpg". By linking directly to the image only the image will appear in its full size within the browser when the link is clicked. The opening link code would be and the closing link tag that would immediately follow the image tag would be . The codes written out would be as follows...

By default the browser will add a border corresponding to the link type. For example, if you have already visited the linked site, the image will appear with a purple border. To element the border you must define the border width as zero. To do so you must type the element border="0". The full code would appear as follows...

One common use for image links is to create toolbars or menu bars. By creating an image of a button with a destination subject within it, you can create a menu bar that leads to other pages within your site. With the use of tables you can align these images to create either vertical, or is on to menu bars in just about any style you would like.