Clickable image: How to link HTML image to URL

You can make an image clickable by wrapping the image html tag(<img>) with link html tag(<a></a>). First, start off by adding an image using HTML.

code:

 <img class="linked-image" src=" https://clickable-image.avicnotes.repl.co/drone-in-flight.jpg " alt="Flying drone with camera">

Wrap the image with a link:

code:

<a href="https://devpractical.com/blog/">
  <img class="linked-image" src=" https://clickable-image.avicnotes.repl.co/drone-in-flight.jpg" alt="Flying drone with camera">
 </a>

You can view the image online and see if you can click on it.

Result:

Flying drone with camera

Advertisement

Sometimes, you want the same image to be loaded when clicked. Use the same url you used on the <img> html tag. Code:

<a href=" https://clickable-image.avicnotes.repl.co/drone-in-flight.jpg">
  <img class="linked-image" src=" https://clickable-image.avicnotes.repl.co/drone-in-flight.jpg" alt="Flying drone with camera">
</a>

Result: Flying drone with camera

Using the same link tag, we can add URL to any relevant website or webpage we want.

Code:

<a href="https://devpractical.com/blog/">
  <img class="linked-image" src=" https://clickable-image.avicnotes.repl.co/drone-in-flight.jpg" alt="Flying drone with camera">
</a>

Result: Flying drone with camera

If you click on the image above, you will be directed to https://devpractical.com/blog/

Remove border around clickable image

Incase you notice a weird border around the image on some browsers, use CSS to remove the border. HTML code:

<a href="https://devpractical.com/blog/">
      <img class="linked-image" src="=" https://clickable-image.avicnotes.repl.co/drone-in-flight.jpg " alt="Flying drone with camera">
 </a>

CSS code:

.linked-image {
  border: none;
}

You can play around and test this code on Replit

author's bio photo

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.