How Do I Add a Hyperlink to an Image in HTML?

Last time I showed you how to add a hyperlink in html for text.  This time, I’m going to show you how to add a hyperlink to an image in html.  This may be useful for linking banners or ads on your site to your contact page.  It adds another call to action to your page to try to convert visitors into customers.  The basic principle of designing a website is to make it as easy as possible for visitors to get the information or service they need.

First, you’ll need an image.  The image should be a banner or something that encourages the visitor to click on it. They can be as simple as a ‘free consultation’ button or an ad advertising a special like “$10 off if you contact us now!”  For this example we’ll use the one below:

Free Consultation

You will need to upload the image to your website.  Be sure you remember what the name of the image file is. For this example, we’ll name the file “free-consultation.jpeg”.

To insert the image onto your site, use the code below:

img src

After you have placed the image where you want it on your site, use a href attribute to link to your contact page or whatever page you want the visitor to go to when they click on the image.

image link

Remember to add the closing </a> tag after the image code. You may have noticed that this is the same as adding a hyperlink to text, except you replace the text you want to link with the image source. Now you can link your images to other pages on your website.

By Tony Fong

Recent Blog Posts

Contact Us Today!

  • This field is for validation purposes and should be left unchanged.