How to Link an Image in HTML
To link an image in HTML, nest the <img>
tag within an <a>
tag.
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.
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.
See HTML Image Maps for detailed instructions on creating image maps.