Bookmark and Share

HTML - Image Links

Image links are constructed as you might expect, by embedding an <img> tag inside of an anchor element <a>. Like HTML text links, image links require opening and closing anchor tags, but instead of placing text between these opening and closing tags, the developer needs to place an image tag -- with a valid source attribute value of course.

Advertise on

If you do not know how to use the image tag, please take a minute and review the HTML Image lesson before reading further.

HTML Image Link Code:

<a href="" target="_blank">
 <img src="ahman.gif" />

HTML Image Link:

By default, many browsers add a small border around image links. This default behavior is intended to give web viewers the ability to quickly decipher the difference between ordinary images and image links. Since this default is different from web browser to web browser, it may be best to squelch this ambiguity and set the border attribute of the image tag to 0 or 1.

HTML Image Border Code:

<a href="" target="_blank"> 
  <img src="ahman.gif" border="0" />

HTML Image Link; No Border:

HTML - Thumbnails

Thumbnails are by far the most common type of image link seen in today's world. To create a thumbnail, one must save a low-quality version of a picture with smaller dimensions. Then, one should link this low-quality picture to its higher-quality counterpart.

Thumbnails are intended to give your audience quick previews of images without them having to wait for the larger, higher-quality image to load. Photo galleries make heavy use of thumbnails, and they will allow you to display multiple pictures on one page with ease.

HTML Thumbnail Code:

<a href="sunset.gif">
  <img src="thmb_sunset.gif" />

HTML Thumbnails:

Bookmark and Share

Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

Advertise Here

More Tutorials!
Microsoft Office Tutorials Artist Tutorials