How to Link an Image in HTML

To link an image in HTML, nest the <img> tag within an <a> tag.

<a href="https://en.wikipedia.org/wiki/Abel_Tasman_Coast_Track" target="_blank">
<img src="/pix/samples/onetahuti_beach_abel_tasman_coast_track_elevated_s.jpg" style="max-width:100%;" alt="Photo of Onetahuti Beach in NZ">
</a>

<p>This thumbnail image is linked to another webpage.</p>

Link a Thumbnail to a Larger Version of the Image

The link doesn't have to be to another webpage. You can also link to a larger version of the image. Just provide the URL of the larger image in the href attribute instead.

<a href="/pix/samples/18l.jpg" target="_blank">
<img src="/pix/samples/18s.jpg" style="max-width:100%;" alt="Photo of 3 cats">
</a>

<p>This thumbnail image is linked to a larger version.</p>

Clicking the above image will open a larger version of the image in a new window. This is because I've nested the <img> element within an <a> element. I specified the location of the larger image in the href attribute and I used target="_blank" to open the URL in a blank window.

JavaScript libraries such as Lightbox allow you to create more sophisticated thumbnail galleries that automatically render an overlay that fills the screen, and dims out the rest of the web page.

Linking Images with Image Maps

Taking image links a step further, you can make different parts of an image link to a different URL. This is called an image map.

<img src ="/pix/samples/australia_nz_map.gif" width="200" height="142" alt="Map of Australia and New Zealand" usemap ="#aus-nz">

<map name="aus-nz">
  <area shape ="poly" coords ="3,47,45,12,105,7,140,60,120,125,12,90" href ="https://en.wikipedia.org/wiki/Australia" target="_blank" alt="Australia">
  <area shape ="poly" coords ="180,85,200,98,167,142,157,138" href ="https://en.wikipedia.org/wiki/New_Zealand" target="_blank" alt="New Zealand">
</map>

<p>Click on each of the two countries above. Each country leads to a different web page. There is only one image, but two links.</p>

See HTML Image Maps for detailed instructions on creating image maps.

Qhmit.com

How to Link an Image in HTML

Link a Thumbnail to a Larger Version of the Image

Linking Images with Image Maps

Related