Weeb tutorials feedback Powered by

HTML - Using images as links.

Using images as links in HTML is as simple as it gets. Let's look at the code required to do this.

Below we have an image, if you click this image you will see that it links you to another page.

 

HTML linked image Click the image to test out the link. Press your browsers back button to return here.

 

So how did we achieve this? Take a look below.

The HTML:

<a href="index.html"><img src="images/HTMLimg1.gif" alt="HTML linked image" align="middle"/></a>

 

As you can see we have simply used the anchor element as we normally would. The only difference being, we have placed an image where the text normally goes.

As simple as it gets.

Opening the new document in a separate window.

Again, this is a simple task and requires one line of HTML code. An example of this is below.

HTML linked image Click the image to test out the link. The document will open in a new window.

Take a look below.

The HTML:

<a href="index.html" target="_blank"><img src="images/HTMLimg1.gif" alt="HTML linked image" align="middle"/></a>

 

We use the same code as in the previous example, but add target="_blank" after the href.

This is the old version of our site. To visit the new version click the following link: New site