Creating clickable areas on images



July 20, 2020

Today we'll check how to create images with clickable areas using HTML only 😎🔥

Basically, with this, we are able to have an image where some specific areas (that are set by us) will be clickable and will link to a specified page.
For this example, I decided to use a picture of me on my setup and I created two clickable areas: the area where the mouse is - that will take us to the website of the mouse - and the keyboard area - that will link to the keyboard's website.

This is super easy to do, we just need three elements: 'img', 'map' and 'area'. So we'll set an img tag with image we want, a specific width and a 'usemap' attribute that will refer to the map we want to use.
Next, we will create a map element with a name attribute and inside it we'll create an area tag for each clickable area we want on the image.

<img src="1.png" usemap="#image-map" width="600px" /> <map name="image-map"> <area target="_blank" alt="Logitech MX Master 3" title="Logitech MX Master 3" href="" coords="240,150,20" shape="circle" /> <area target="_blank" alt="Ducky One 2 SF" title="Ducky One 2 SF" href="" coords="290,220,50" shape="circle" /> </map> <p>Click on the mouse and on the keyboard to find out more about them</p>

On this 'area' we want to set some attributes. We'll set 'shape=circle' for the clickable area to be circular. We have to set the 'href' for the page we want to redirect to and 'target=_blank' to redirect to this page in a new tab. Finally we need to set the 'coords' attribute that will define where exactly the clickable area will be. We are passing three values: the x coordinate, the y coordinate and finally the size of our area!

Hope you liked this tip and see you soon! 🤗✌️