How to use image as a link with CSS

In this lesson, we’re going to represent how to use image as a link or process to create an image link. This means, a whole image will be act as an Anchor Text. When anybody clicks on this image, he/she will be directed to a specified URL or Destination webpage.

Let’s start.

How do we create a text link? Simply, we use a tag like the way shown below:

CODE

<a href="www.netplanter.com">TEXT</a>

Here-

• Value www.netplanter.com of href attribute indicates destination URL.
• ‘TEXT’ within starting tag and ending tag is Anchor Text or clickable text.

OUTPUT

Use image as a link

Now, In this linking process, we wish to add an image whose tag is <img>. How to do that?

Will <img> go inside <a> or <a> go inside <img>? Certainly <img> goes inside <a>.

The most reasonable cause of this is- you know <img> has no closing tag. We’ll fix the <img> tag in place of TEXT.

Now let’s see the complete code:

<a href="www.netplanter.com">
<img src="my_image.png"> 
</a>

Here in <img>, src value my_image.phg indicates image source url. With <img>, you can also use attributes alt, width and height.

Now let’s take an image and rewrite the code with actual image url and other attributes that will suit our example:

CODE

<a href="netplanter.com">
<img src="https://www.netplanter.com/wp-content/uploads/2020/02/KARABI-FLOWER-1.jpg" alt="Karabi Flower" width="150px" height="150px"> 
</a>

OUTPUT

Now, you see, the flower image is a clickable link. If you click on it, you’ll be directed to NETPLANTER homepage.

Here when you click in any point on the image, it will redirect it to the same destination. But is it possible to create different links on different points of a single image?

Certainly, just follow the link below-

Thanks to follow this tutorial. Hope you comment.