Clickable image: How to link HTML image to URL

How to make Clickable image in HTML – 500 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

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, cse 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