HTML Image Hyperlinks

Email this article
Printer friendly page
Previously, we have discovered HTML Image Codes and several attributes which can be added into the Inline Image Tag.

HTML Image Hyperlinks have nothing to do with the actual Image Tag. The Hyperlink is a seperate code which can be anchored to an image in the same way as it is anchored to a HTML page or a PDF document.

* How To Hotlink Text To Image
* HTML For Adding Link To Image
* Image Download Links

All examples on this page will open a new browser window so pop-up blocking software should be disabled in order for links to work properly.

How To Hotlink Text To Image
Create a regular text based Hyperlink and point it to an image. Clicking on the hyperlink will result in the image being displayed in a web page on it's own.

It is common to set these links to open in a new browser window because the destination page does not contain a link back to the origin of the link.

How To Link Word To Image HTML

Click here to display image
Output

Click here to display image

You will notice in the above example that the URL points directly to an image because the URL ends with .jpg. When we make a link in this way, the image gets displayed when the link is clicked in the normal way.

However, we can also right-mouse click the link and save the image to our hard drive by selecting the "Save Target As" option from the menu.

HTML For Adding Link To Image
Adding a link to an image is the same as linking text to an image except the Inline Image Tag gets inserted instead of the text. What this means is that instead of clicking on a text link, we click on an image link.

The Hyperlink can be pointed to a larger version of the same image or can be linked to another document on the web.

The examples below do not have an Image Border Attribute assigned. In these cases, a default border appears in order to show people that the image is in fact a link.

The thickness of the border can be changed by adding the border attribute to the Image Tag. To remove a border from an image hyperlink, insert the border attribute and set the value to "0".

How To Link Thumbmnail to Image HTML


Output

How To Link Thumbmnail to Document HTML


Output

Note

The thumbnail above is just a cut-down version of the larger original image. It is a seperate image with a different file name than the original larger image.

One of the reasons people use thumbnails on their web site is because of their small file size. This helps to reduce bandwidth costs on high traffic sites. The next step to reduce bandwidth even further is to use plain text links.

Image Download Links
Image hyperlinks can also be used as download links. Craft the hyperlink in the usual way but point it to a specific file download.
Save to del.icio.us :: Digg This! :: Stumble It!
Related Articles
Hyperlink and Status Bar
HTML Hyperlink Code
HTML Image Codes
HTML Code For Linking To This Page
HTML Image Hyperlinks