HTML Image Link Code

Image Link Code: With Border

To create a border around your image when linked, use the 'border' attribute, specifying the size of the border. For example, type border="2" in the img tag.
Note that, if you don't provide the 'border' attribute, some browsers will automatically display a border.
Code:
<a href="http://www.natural-environment.com/blog/2008/11/07/what-is-the-worlds-largest-rabbit/" target="_blank"><br /> <img src="http://www.quackit.com/pix/worlds_largest_rabbit_2.jpg" width="200" height="261" border="2" alt="Photo of a big bunny rabbit!" /><br /> </a><br />

This code results in (click on the image):

You'll notice that the linked page opens in a new browser window. This is because I've specified target="_blank" in the code. If you don't want the page to open in a new window, simply remove this piece of code.

Image Link Code: No Border

To remove the border, type border="0" in the img tag.

Code:
<a href="http://www.natural-environment.com/blog/2008/11/07/what-is-the-worlds-largest-rabbit/" target="_blank"><br /> <img src="http://www.quackit.com/pix/worlds_largest_rabbit_2.jpg" width="200" height="261" border="0" alt="Photo of a big bunny rabbit!" /><br /> </a><br />

This code results in (click on the image):

Image Link Code: Thumbnails

You can link to a larger version of an image. When you do this, the smaller image is usually referred to as a "thumbnail" or "thumbnail image".

When using thumbnails, it's best to resize the image using an image editor (as opposed to just resizing it in the HTML). This means you should have two images: One full sized image, and one (smaller) thumbnail image.

Code:
<a href="http://www.quackit.com/pix/worlds_largest_rabbit_2.jpg" target="_blank"><br /> <img src="http://www.quackit.com/pix/worlds_largest_rabbit_2_t.jpg" width="100" height="131" border="0" alt="Photo of a big bunny rabbit!" /><br /> </a><br />

This code results in (click on the image):

Image Maps

Image maps allow you to create many "clickable" areas within a single image. Hover over the image below to see what I mean. As you hover, you'll notice the cursor turn into a hand as you hover over each link. There are 3 different links in the image below. See if you can find them!

To create an image map, check out how to create image maps.

Templates

You can use the following templates as a basis for your HTML image link codes. Simply fill in the blanks or remove uneeded attributes.

Link Code Template

To link an image, simply nest it inside a hyperlink tag. Here is the hyperlink tag including all possible attributes.
For an explanation of all the attributes, see the HTML a tag specifications.




<a href=""
 name=""
 hreflang=""
 type=""
 rel=""
 rev=""
 charset=""
 shape=""
 coords=""
 target=""
 accesskey=""
 dir=""
 class=""
 id=""
 lang=""
 tabindex=""
 title=""
 style=""
 onfocus=""
 onblur=""
 onclick=""
 ondbclick=""
 onmousedown=""
 onmouseup=""
 onmouseover=""
 onmousemove=""
 onmouseout=""
 onkeypress=""
 onkeydown=""
 onkeyup="">Image goes here</a>

Link Code Template

Here is the image tag including all possible attributes.
For an explanation of all the attributes, see the HTML img tag specifications.




<img src=""

 width=""

 height=""

 border=""

 alt=""

 class=""

 id=""

 title=""

 style=""

 dir=""

 lang=""

 ismap=""

 usemap=""

 align=""

 hspace=""

 vspace=""

 onclick=""

 ondbclick=""

 onmousedown=""

 onmouseup=""

 onmouseover=""

 onmousemove=""

 onmouseout=""

 onkeypress=""

 onkeydown=""

 onkeyup="" />