Quackit Logo
HTML
CSS
Scripting
Database
Hosting
Design
XML

HTML Image Link Code

The following is an example of html image code. You can copy and paste this code into your own HTML documents - just change the values of the attributes as required.

For various code usage, check out the HTML links page from the HTML tutorial.

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, even if you don't provide the 'border' attribute, some browsers will automatically display a border.

You can also specify a border using the CSS border property. This will result in the image having a border even when it's not linked. In this example, we specify that the border should be 2 pixels wide, solid, and black. You will usually find that the CSS method overrides the HTML method.

More about image borders here.

CodeResult

Photo of Milford Sound in New Zealand!

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. You should also type style="border:none;", which is the CSS method for ensuring that there's no border

CodeResult

Photo of Byron Bay - one of Australia's best beaches!

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.

CodeResult

Photo of a big bunny rabbit!

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!

Mueller Hut, Mount Cook, and I Me Mount Cook Mueller Hut

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="" />

Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites