5 Ways To Create Image Links In HTML – Simple Examples

Welcome to a quick tutorial on how to create image links in HTML. Want to redirect the user when they click on an image? Create a redirect button using an image?

The easy way to create an image link in HTML is to wrap the image in an anchor tag – <a href="HTTP://SITE.COM"><img src="IMAGE.JPG"/></a>

That wraps up the basics, but read on for more methods and examples!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Image Links Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

 

1) WRAP IMAGE IN ANCHOR TAG

1-img.html
<a href="https://code-boxx.com">
  <img src="dolphin.jpg"/>
</a>
<a href="https://code-boxx.com" target="_blank">
  <img src="dolphin.jpg"/>
</a>

As in the introduction above, this is the easiest way to create image links. Just wrap the image in an anchor tag.

 

2) JAVASCRIPT ON CLICK

2-onclick.html
<img src="dolphin.jpg" onclick="location.href='https://code-boxx.com'"/>
<img src="dolphin.jpg" onclick="location.replace('https://code-boxx.com')"/>
<img src="dolphin.jpg" onclick="window.open('https://code-boxx.com')"/>

Some people go into a “Javascript is difficult” denial whenever “script” is mentioned. But no, attaching an onclick to the image is all we need.

  • Use location.href = "HTTP://SITE.COM" will perform a “normal redirect” to the website.
  • location.replace("HTTP://SITE.COM") replaces the current URL, the current page will not be stored in the navigation history.
  • window.open("HTTP://SITE.COM") opens the link in a new tab/window.

 

 

3) SUBMIT HTML FORM

3-form.html
<form action="3-form.html" method="post">
  <input type="hidden" name="id" value="123456"/>
  <input type="image" src="dolphin.jpg"/>
</form>

To submit an HTML form, we usually click on a <input type="submit"/>. But if you want to use an image as the submit button, use <input type="image"/> instead.

 

4) CSS BACKGROUND IMAGE

4-css.html
<style>
#demo {
  width: 300px;
  height: 200px;
  display: block;
  background-image: url("dolphin.jpg");
}
</style>
<a id="demo" href="https://code-boxx.com"></a>

This is the “alternate way” of creating an image link – We use CSS to set the image as the background. This may be kind of useful if you have a repeating pattern of sorts.

 

 

5) IMAGE MAP

5-map.html
<img src="dolphin.jpg" alt="dolphin" usemap="#imgmap">
<map name="imgmap">
  <area href="https://code-boxx.com" coords="233,193,56,134" shape="rect">
  <area target="_blank" alt="Boop" title="Boop" href="https://en.wikipedia.org/wiki/Dolphin" coords="127,78,51" shape="circle">
</map>

Lastly, we can use image maps to mark areas of the image as links. This may seem like some “advanced good stuff” at first, but there is a fatal flaw with the image map in this modern age. If we set the image to be responsive (auto-scale to fit the screen size) – The image map will no longer work. So yes, this is a good-to-know and a relic of the past.

P.S. If you want to use an image map, use an online tool to help generate one quickly.

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

HTML Image Link (Click To Enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *