Do you ever wondering how to add a link to your already
HTML image tag ??
Awesome, let us get into that 🔥
The following example is the usual stuff we do to display image in <img>
tag.
<img src="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg"
alt="cannot sleep">
When you click the image above, it will zoom in, instead of open the image link. This is the expected result 😅.
But how to add a link to the image ??
Easy peasy 😉
This example builds upon the previous one, showing how to turn the image into a link. To do so, nest the <img>
tag inside the <a>
.
You should make the alternative text describe the resource the link is pointing to as if you were using a text link instead.
<a href="https://www.thecoderpedia.com/blog/programming-memes/">
<img src="https://www.thecoderpedia.com/wp-content/uploads/2020/06/Programming-Memes-Programmer-while-sleeping.jpg"
alt="Visit Meme site">
</a>
Try to click the above image and you will direct to the source link.
The End ;p
resources;
MDN
Top comments (2)
Hi Amirul, pretty nice straightforward post.
I just want to share the last video I created on youtube regarding links as a supplemental to learning.
Have a great day all!
Cool, thanks Angelo ;p