How do I make a clickable link on LinkedIn?

HTML Example:

This is a paragraph.

CSS Example:

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
}

JavaScript Example:

Click Me!

PHP

A web server programming language

W3.CSS

A CSS framework for faster and better responsive web pages

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

W3Schools' famous color picker:

Exercises and Quizzes

Test your skills!

Kickstart your career

Get certified by completing a course

How To Section

Code snippets for HTML, CSS and JavaScript

By the way, I could not find a reliable free plugin that could do this job. That’s why in the first place I’ve written this tutorial.

Contents

• Why you may need image with multiple clickable areas?
• Ready example
• Is it difficult to make image with clickable areas that scale correctly?
• Tutorial how to create a responsive image with clickable areas that scale correctly
  • 1. Handle correct scaling of image with clickable areas
  • 2. Simply insert image into your post or page
  • 3. Generate image map code for your image
  • 4. Insert your code into your post or page and check out how it works
• Free WordPress plugins for creating image maps
• Conclusion

Why you may need image with multiple clickable areas?

Images that contains one or multiple areas that can be clicked are more interactive, more engaging, more interesting, more creative and provide better conversions compared to simple clickable images.

This allows you to get an image and let your users click on different parts of your image. This can be well used for floor plans, assembly parts, body parts, food recipes etc. Another example how you can use it is bringing a new life into your old static infographic to make it interactive with clickable areas.

Ready example

Here’s an example I’ve made for a demonstrating purpose:

There are four clickable areas on the image above. Each area has different URL which goes to a specific article. By the way, check them out – they are the corner stones of my website and very popular.

If you open this page on a mobile device (or simply resize your browser window on your desktop) you will see that the image above got scaled. And the clickable areas also stayed where they had to. So the image does not loose its clickable functionality after scaling.

Also, if you like, you can see my live example of the image with clickable areas which resize correctly. It’s a simple image scheme that assists in choosing hosting. (Update: I replaced the image map on that page with a SVG image created with the help of the new tutorial).

Is it difficult to make image with clickable areas that scale correctly?

No, not at all. What you basically need is:

1. Create an image map out of your image. It requires you to use HTML editing of your post where you use your mage, but the HTML code for the image is pretty simple.
2. Use a free plugin (Responsive Image Maps) that handles image maps scaling. The plugin is dead-simple and does not require any settings.

So, the bottom line is that the most difficult part of creating a scalable image with clickable areas is creating clickable areas on your image. But you can handle it easily as long as you can deal with HTML view of your links.

In other words, if you are not afraid of seeing something like the code piece below, then you can do it.

<area shape="rect" coords="10,105,157,225" href="http://YourURL.com">

(This is a code for a clickable rectangle area)

I will explain further in details what exactly you need to do to get multiple clickable areas on one image.

Tutorial how to create a responsive image with clickable areas that scale correctly

In short, the whole thing is pretty simple:

• you need to turn your image into image map (image with clickable areas);
• you need to handle correct scaling of image with clickable areas (you need a plugin for that).

Here’s a video tutorial where I demonstrate all the steps described in this post.

And here are the description of the steps below I’ve done.

1. Handle correct scaling of image with clickable areas

Install Responsive Image Maps plugin. It’s a free plugin for WordPress that handles image maps scaling. The plugin does not require any settings. Simply install it and that’s it.

Without this plugin your clickable areas on your WordPress site will not work correctly when your image is scaled (e.g. after a browser window is resized).

2. Simply insert image into your post or page

You can start creating an image map from inserting your image to your WordPress post or page the usual way.

Here’s a HTML view of the inserted image:

If you are using WordPress Block editor, then temporarily add a image block and copy its 〈img〉’s HTML content. You will need it further. I highlighted the part that you need as an example:

You don’t need anymore the image block which you added. You can remove it.

3. Generate image map code for your image

There are many ways how you can generate or create HTML code for your image to get an image map.

Basically, the core of the code contains coordinates of your clickable areas of your image.
Image map code with one rectangle clickable area may look like this:

<img src="http://your-site.com/wp-content/uploads/2016/06/img.png" usemap="#image-map">

<map name="image-map">
<area href="http://TargetURL.com" coords="9,12,279,78" shape="rect">
</map>

This code will display image img.png with clickable area of a rectangle form. The form will have specified coordinates (in pixels).

Let’s see line by line at the code:

Line 1 contains your image location (you get it when you insert image) and the identifier for your image map (image-map – you can make it up, make sure it’s unique within your post or page).

Line 2 is just an empty line (does not play any role).

Line 3 contains opening tag for your image map. It contains your image map identifier (image-map)

Line 4 contains properties for clickable area. In particular, there are: URL that opens when user clicks this area; coordinates and shape of the clickable area. In our example the clickable area is rectangle (rect). The coordinates are in pixels in the following order (Left upper horizontal, Left upper vertical, Right lower horizontal, Right lower vertical). The beginning of coordinates (zeros) are the very left upper corner of your image.

Line 5 contains just a closing tag for your image map.

As you can see the code for image map is pretty simple. You can get coordinates in any image editor and write the code manually. But in this tutorial I will use a free simple online service that simplifies this process and generates the code for your image.

By the way, if you want to play with image map coding, you can do it here. Clickable areas can be rectangle, circle or polygonal.

After I got the code for my image map generated, I just specified the image map identifier (usemap property, my-image-map in my case) for the image I inserted on step 2.

And the final code for my image map with four rectangle clickable areas looks like this in my example:

<img src="https://researchasahobby.com/wp-content/uploads/2016/06/my-scalable-img2.png" alt="responsive image with clickable areas" width="600" height="420" class="aligncenter size-full wp-image-3344" usemap="#my-image-map"/> 

<map name="my-image-map">
    <area target="_blank" alt="Reliable hosting" title="Reliable hosting" href="https://researchasahobby.com/best-website-hosting-companies-fooling/reliable-web-hosting-recommend/" coords="7,12,279,81" shape="rect">
    <area target="_blank" alt="Growing website audience" title="Growing website audience" href="https://researchasahobby.com/best-optin-plugin-thriveleads/" coords="338,12,588,82" shape="rect">
    <area target="_blank" alt="Website security" title="Website security" href="https://researchasahobby.com/best-security-plugin-for-wordpress-combination/" coords="12,336,279,403" shape="rect">
    <area target="_blank" alt="WordPress backup plugins and services" title="WordPress backup plugins and services" href="https://researchasahobby.com/wordpress-backup-codeguard-backupbuddy-blogvault-vaultpress/" coords="338,336,588,405" shape="rect">
</map>

Title and Alt properties are not necessary. Alt tags are good for SEO and Title tags allow users to see hints (tooltips) when moving mouse over the clickable areas. I want the links to open in new browser windows or tabs, so target=”_blank” is added for this purpose.

4. Insert your code into your post or page and check out how it works

Add your code to your post or page, save changes (or make a preview of the changes).

If you are using WordPress Block editor, then to add the responsive image with clickable areas you need to use Custom HTML Block. Add this block and add the code you created.

In my example it looks like this:

Your image should display with clickable areas. Move your mouse over the clickable areas to see if they work the way you expect.

Also, resize your browser window to get your image scaled and check you if the clickable areas continue working fine.

That’s it!

It required a little bit of coding, but if you are not afraid of working with html view of your posts or pages, then it’s a just piece of cake for you.

Free WordPress plugins for creating image maps

What if you don’t want to mess up with the code at all? Are there any free plugins that make your life easier to create image maps?

Yes, there are some plugins. But as far as I could find (or better to say, could NOT find), none of them are free or work flawlessly.

• Image Mapper by WP Tooling

It’s some beta version, last updated in 2014, did not work for me at all (could not load any images to start testing it)

• ImageMapper  plugin

This seems like an awesome free plugin that allows creating not only clickable areas, and has additional features like areas highlighting and popup layouts. It was originally designed in 2013 for creating comics for some project. But unfortunately since that time the development of the plugin was very limited. And it simply does not work for some people or stopped working.. Also some users report that they have issues with using multiple image maps.

Although it’s reported to work on responsive websites, after playing with the plugin for a while I could not make the image maps responsive on my test site, i.e. image maps created with this plugin did not scale when size of browser window changed. And therefore on mobile devices it did not look great on my tests.

However, this plugin may work in your case. And this is a more beautifully-looking solution that the method I’ve described in this tutorial.

However, since the plugin is not actively developed, it may stop working one day.
And the solution I’ve described in this tutorial is a super reliable one.

• Draw Attention plugin

This looks like a cool and well-functioned plugin. But its free version allows to create only one interactive image (image map).

Conclusion

When I needed a quick solution to creating an image map (it’s an interactive image, image with clickable areas) which would be responsive, I could not find a free plugin for that. That’s why I created this tutorial to share my approach, which requires you to be able to deal with html code a bit.

However, there are some free plugins that can create interactive images without any coding. Although these plugins have limitations, there are chances that they may work in your case. But I would not call it very reliable solution. Anyway, I’ve described these plugins in the section right before the conclusion.

There is also a number of paid plugins that you can use to create responsive images with clickable areas. But if you need a free, simple and reliable solution, then this tutorial is what you need.

P.S.: if you know about the WP plugin that can create responsive image maps for free, feel free to let me and other readers know in the comments below. And I’ll include this information into my article to share the knowledge.

P.P.S.: if you are not using WordPress, here are some jQuery plugins that can make your image maps responsive or/and really advanced: ImageMapster, jQuery RWD Image Maps.