I want to add link to my html image. how can i make my image clickable, directing user to another web page once clicked?
Insert link to an image
Insert Image
You can insert image easily by use a simple code. You should upload a image or picture first for use it in your website, blog or forum. You can use your uploaded image/picture everywhere in internet. After upload successfully you should write bellows code for customize that image/picture by HTML coding.
Example :
<a href="https://www.techyv.com" target="_blank"><img src="https://www.techyv.com/sites/default/files/techpedia_logo.png" width="201" height="205" /></a>
In above code I used
this image link for show an image. And I used https://www.techyv.com this link as my action link for this image. If anybody click on that image he/she will redirect in a new site with new page.
Thanks.
Insert link to an image
When inserting an image to a web page, we normally use the tag: <img src=”URL” alt=”TEXT”>. URL is replaced by the URL or address of the image you want to use. The TEXT is any word or words that you want to use to describe the image. It is the alternative information that will be displayed in case the image doesn’t load.
Before you can insert and display an image in your web page, you need first to upload it to your site or to any file hosting site. Once it is uploaded, you need to get its address. See the example below.
-
<img src=”http://d4bdalbaf0n6u.cloudfront.net/techpedia_logo.png” alt=”logo”>
Output:
Now that you can display an image to a page, it is still not enough since you can’t click on it. The HTML tag responsible for linking web pages or directing a user to another page or site is the anchor tag: <a href=”URL”></a>. The URL is replaced with the address of the page to link.
To make an image clickable, you need to combine it with the anchor tag. When the anchor tag and image tag are combined to make a clickable image, it is usually in this format: <a href=”URL”><img src=”URL” alt=”TEXT”></a>. Let’s take the image above as an example and let’s direct the image to the TechyV home page. See how it is done below.
-
<a href=”https://www.techyv.com/”><img src=”http://d4bdalbaf0n6u.cloudfront.net/techpedia_logo.png” alt=”logo”></a>
The output would be:
