HTML Image Link
Creating an HTML image link is easy. To create an image link, you combine an <a> tag (i.e. link) with an <img> tag (i.e. image). You simply "wrap" the link code around the image code.
Here's an Example:
| Source Code | Result |
|---|---|
|
If you check the code, you'll see that we've simply placed the code for an image inside the code for a normal link.
In case you're not aware, to create a link in HTML, you use the <a> element (the "a" stands for "anchor"). The syntax goes something like this <a href="...some URL...">anchor text</a>. To create an image in HTML, you use the <img> element. To create an image link, you just nest the <img> element inside the <img> element - just as we've done with the above example.
Also note that we've added target="_blank" to open the page in a new window. You can remove that piece of code if you don't want the link to open in a new window.
Adding/Removing Borders
Some browsers automatically display a border around an image whenever it's linked. Other browsers don't. In order to keep your images looking consistent, it pays to add some code so that the image displays consistently throughout different browsers.
Add a Border
To add a border to your image, you should use the CSS border property.
| Source Code | Result |
|---|---|
|
|
Remove Borders
If you prefer not to have a border around your image, simply modify the width of the border to zero (i.e. border:0 ). Example:
| Source Code | Result |
|---|---|
|
|
Thumbnail Images
You can link to a larger version of a smaller image. The smaller image is often referred to as a "thumbnail image" or simply just a "thumbnail".
To do this, you should have two images; a small image (i.e. the thumbnail) and a large image.
It is possible to use one image and simply resize it using HTML but that usually defeats the purpose of creating a thumbnail. Creating a separate thumbnail image allows you to use a smaller, less bandwidth intensive image for the thumbnail, and a larger, more detailed image for the full-sized image. Simply resizing the image will use the same bandwidth regardless.
Using thumbnail images, you can link to the actual full-sized image, or to an HTML page that embeds the full-sized image. Either way is fine. If you embed the larger image into an HTML page, at least you can add other things to the page (such as navigation etc).
Anyway, here's an example of linking a thumbnail image to a larger image:
| Source Code | Result |
|---|---|
|