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:
Link HTML image to Own URL
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:
Link HTML image to a Different URL
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:
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
