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
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.
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="">
srcmeans image source url
altmeans 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
area elements where each
area defines a linkable object. Noted,
area has no closing tag. Now let’s see the
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) attributes to define multiple links with image
area attributes carefully one by one:
- Shape: Shape indicates the shape of the objects in image. Shape has four values
- rect: It indicates rectangular area in image.
- circle: It indicates circular area.
- poly: It indicates polygonal area
- default: It indicates entire area.
- coords: coords values are number in pixel from left and top that indicates definite point in image.
- alt: text that is displayed in place of image if image loading gets delayed.
- href: Destination url of this definite clickable area.
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>`
- We’ve styled our displaying image with
- Our first object is helmet. It is circle-like. So, in first
areaelement, 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
areaelement, 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?