How to create multiple links in single image with CSS

In this tutorial, we’re going to represent a trick to create multiple links in single image with CSS in any platform including WordPress.

We usually create image link with img and a element where whole of the image turns into one clickable area. When anybody click on any point/part of that image, he/she will be redirected to a single specified URL. But what if we can create multiple links in one image where each part of the image will send the clicker to separate URL?

Yes, we’re going to do that practically by using CSS. This kind of linking may be essential if you like and plan to include different links of a group of info in a single image, such as, Social Media linking through clicking on icon.

So, let’s go deep into it.

Creating multiple links in one image

First look at the image we’re going to create links in.

We see, on a background, there are two objects on the image- a helmet and a dictionary. To keep things simple, we’ll only create two different links with two objects and won’t enter any complication. Our project is: on clicking Helmet, clickers will be sent to the full image of the Helmet. Similarly, clicking on Dictionary, one will reach the full size image of the Dictionary.

Image map element to create multiple links

In this stage, html element map comes into the scenario. For our purpose, we’ve to map the image. Why and how to map image? We’ll proceed to find the answer part by part. First look at the image (img) html element we use to insert an image in a webpage:

<img src="" alt="">

Here

• src means image source url
• alt means text that will show in place of image if image loading gets delayed.

But to serve our purpose, one more attribute has to be used with img. That is usemap. The value of usemap attribute is # followed by a NAME. This same NAME will be used as the value of name attribute of map element. Look below:

<img src="" alt="" usemap="multilinks">

<map name="multilinks"> 

</map>

We’ll define multiple link-points here with map element. And name attribute-value ‘multilinks’ is the connection between map and img element.

This map wraps area elements where each area defines a linkable object. Noted, area has no closing tag. Now let’s see the map with area at a glance:

<img src="" alt="" usemap="multilinks">
<map name="multilinks"> 
<area shape="rect" coords="" alt="" href="">
<area shape="circle" coords="" alt="" href="">
<area shape="poly" coords="" alt="" href="">
</map>

Now, it it time we explained all the attributes used with area.

Area ( area) attributes to define multiple links with image

Look at area attributes carefully one by one:

Now let’s enter our project:

Mini project to add multiple links with image

In this stage, we’re ready to set our project. First see the codes at a glance:

<img src="https://www.netplanter.com/wp-content/uploads/2020/02/MULTIPLE_LINK_IMAGE.jpg"
alt="Multiple links image" 
usemap="#multilinks" 
width="250" 
height="200">
<map name="multilinks"> 
<area shape="circle" 
coords="65,50,40" 
alt="Helmet"
href="https://www.netplanter.com/wp-content/uploads/2020/02/HELMET.jpg">
<area shape="rect" 
coords="154,71,220,180" 
alt="Dictionary" 
href="https://www.netplanter.com/wp-content/uploads/2020/02/DICTIONARY.jpg">
</map>`

Example Explained

• We’ve styled our displaying image with width:250px and height:200px.
• Our first object is helmet. It is circle-like. So, in first area element, shape is circle. Coords is “65,50,40”. Here first two number “65, 50” specifies center of the circle or helmet. 65px is from left and 50px from top. Third number 40px specifies the radius of the circle. Such a circle that is specified is the clickable area whatever the measurement of the helmet be. Here alt is alt-text ‘helmet’ and href is full-size helmet url which a user will reach after clicking.
• Second object Dictionary is rectangle-shaped. So in second area element, shape is rect. Coords is “154,71,220,180”. Here the first two numbers 154px (left) and 71px (top) specifies upper-left corner of the rectangle (dictionary). The last two numbers 220px (left) and 180px (top) specifies the bottom-right corner of the rectangle. This two point has created the area of the dictionary and this is the clickable area. Here alt is alt-text ‘Dictionary’ and href is full-size dictionary url which a user will reach after clicking.

Bonus tips: To measure the left-length and top-length in pixel, you can use PixelRuler. Download PixelRuler 3 from here.

Now let’s display the image with two separate links:

Now click two objects- helmet and dictionary separately and keep enjoying!!

Hope you enjoyed the whole tutorial on How to create multiple links in single image with CSS.

Try yourself and let me know of your success, failure and challenges?