Separate an image to do different actions

I am using an image full screen in a page html, I want to separate this image in different pieces and to make different actions like opening a pop up for example. example: if I click in the image top right this part has to open a pop up. Have any idea how to process ?

Actually I have this :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>Parallax Template - Materialize</title>

  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>

    <img src="background1.jpg" alt="Unsplashed background img 1">


  <!--  Scripts-->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="js/materialize.js"></script>
  <script src="js/init.js"></script>

  </body>
</html>

Thank you.

Solution

To be sure you want to change the image to a image map. what you have to do first obviously is either to just use an online imagemap generator like this site https://www.image-map.net/ which will be super easy or write the code for the imagemap

    <img src="planets.gif" width="145" height="126" alt="Planets" 
         usemap="#planetmap">

    <map name="mymap">
      <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
      <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
      <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
    </map>`

depending on the parts you want clickable on your image you configure the these position in shape form inside the map tag and define the hrefs.

after that thats when you can bind these positions on the image with you javascript

$(document).ready(function(){

     $("a[href['sun.htm']").click(function(){

           console.log("image right position has been clicked");

     });

 });