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

How To Make a Hyperlink

Link to other documents on the web or bookmark inside a document.

The following 2 examples illustrate how to link to other documents on the web. Point this type of hyperlink to any web page.

Absolute Path Source

hyperlink color
Absolute Path Output

How to change hyperlink color.

Relative Path Source

HTML color chart
Relative Path Output

HTML color chart with 216 HTML color codes.

How to make a hyperlink open in a new browser window.
Sometimes we want our visitors to open links in a new browser window. The purpose of this is to allow visitors to visit other web sites without leaving our site.

Download links can also be set this way.

Source

hyperlink buttons
Output

How to make hyperlink buttons.

If you click the link above, it will open a new browser window. If you have a pop up blocker enabled, you should turn it off because if the pop up blocker thinks that the new window is a pop up, it will kill it.

How To Use Hyperlinks Within a Document.
Creating hyperlinks within a document allows us to link to certain sections on the same page. This is called "bookmarking" and is also done with the Anchor Tag.

Example: Top of Page

Bookmarking is especially useful in long HTML documents. The links can be placed at the top of the document linking to key points below. This provides fast access to key points for people who return to the page after their initial visit.

When using this Tag to bookmark, it is important to remember that these tags work together in pairs. One Tag is the hyperlink and the other is the destination.

GoTo Target - Hyperlink

Top of Page
Target Insert - Destination - Bookmark


The destination source has no visible output. This is because it gets inserted into the section of the page that you wish to bookmark. The Hyperlink points to the Bookmark.

"Name" the bookmarks anything you want and point a hyperlink to that name.

Hyperlink Goodies
The above hyperlink uses should be enough to get most people by for 90% of the time. But if you are like to have a bit of fun, you can play around with this Tag from within 1st Page 2000.

Hyperlink Button
1st Page 2000 also has an Advanced hyperlink code generator. If you launch this tool, you will discover that there are actually many hyperlinks available with a large variety of uses.

The Hyperlink Code Generator can be launched by clicking the button located on the standard toolbar in Expert Mode.

Tip: If your hyperlinks are affiliate links, it may be a good idea to change the StatusBar text in order to hide affiliate links from the StatusBar and improve click-through rates.