How to create multiple links on Single image

Requirement : Multiple labels on a image, on click of each image user should be redirected to respective link.

Reference link – https://www.netplanter.com/how-to-create-multiple-links-in-single-image-with-css/

<img src="sites/qms/Images1/QMSLandingPage.png?csf=1&web=1&e=WEKuhK"
alt="Multiple links image" 
usemap="#multilinks" width="1000"
height="861">
<map name="multilinks"> 
<area id="a1" shape="rect" 
coords="385,90,735,140"
alt="ConsultingServices"
href="sites/qms/SitePages/ConsultingServices.aspx">
<area  id="a2"  shape="rect"
coords="440,315,860,360"
alt="TransformationServices"
href="/sites/qms/SitePages/TransformationServices.aspx">
<area  id="a3" shape="rect"
coords="375,540,689,590"
alt="ManagedServices"
href="/sites/qms/SitePages/ManagedServices.aspx">
<area  id="a4" shape="circle"
coords="139,330,135"
alt="ProjectManagement"
href="/sites/qms/SitePages/Project-Management.aspx">
</map>

<style>
   #a1:hover:after {
position:absolute;
     display:block;
     content: ' ';
     border: 2px solid red;
     top: 200px;
     left: 605px;
     width: 350px;
     height: 50px;
   }
 #a2:hover:after {
     position:absolute;
     display:block;
     content: ' ';
     border: 2px solid red;
     top: 420px;
     left: 660px;
     width: 420px;
     height: 50px;
   }
#a3:hover:after {
     position:absolute;
     display:block;
     content: ' ';
     border: 2px solid red;
     top: 640px;
     left: 600px;
     width: 315px;
     height: 50px;
   }
</style>

Thank you.