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.
How do we create a text link? Simply, we use
a tag like the way shown below:
hrefattribute indicates destination URL.
- ‘TEXT’ within starting tag and ending tag is Anchor Text or clickable text.
Use image as a link
Now, In this linking process, we wish to add an image whose tag is
<img>. How to do that?
<img> go inside
<a> go inside
<img> goes inside
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>
my_image.phg indicates image source url. With
<img>, you can also use attributes
Now let’s take an image and rewrite the code with actual image url and other attributes that will suit our example:
<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>
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.