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.

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

<a href="http://www.espn.com" target="_blank">
 <img src="ahman.gif" />
</a>

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.

<a href="http://www.espn.com" target="_blank"> 
  <img src="ahman.gif" border="0" />
</a>

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.

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

HTML Thumbnails:

• Go Back
• Continue

Found Something Wrong in this Lesson?

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