Need to place several PNG images over single background PNG image at particular location

programming web dev
1

I have a background PNG image. I need to place some icons which are also PNG images at specific locations.

The first thing is I need to get coordinates of a particular spot on the background image. Then, using those coordinates, I need to place several sub images over that point so that it is placed exactly at intended places over background image
I have tried the below code to fetch coordinates:
var subImageSelector=document.querySelector("#subimage_id");
var backGrndImageSelector=document.querySelector("#background_id");

backGrndImageSelector.addEventListener(“click”,getClickPosition,false);
//script
function getClickPosition(e) {
var parentPosition = getPosition(backGrndImageSelector);

pos_x=e.clientX-parentPosition.x;
pox_y=e.clientY-parentPosition.y;
var translatedValue="text-transform:(" + pos_x +"px," + pox_y + "px," +"0px" +")";
var offset_t = $(this).offset().top - $(window).scrollTop();
var offset_l = $(this).offset().left; 
var offset_t=  $(this).offset().top;
var left = Math.round( (e.clientX - offset_l) );
var top = Math.round( (e.clientY - offset_t) );
alert("Left: " + left + " Top: " + top);

}

//helper function to get exact position on Mouse point on any window
function getPosition(element) {
var xPos = 0;
var yPos = 0;

  while (element) {
      xPos += (element.offsetLeft - element.scrollLeft + element.clientLeft);
      yPos += (element.offsetTop - element.scrollTop + element.clientTop);
      element = element.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}
  1. After getting above co-ordinates i am setting sub images at top,left pos (over backroound image)as below using inline css in html

–Actually in translate3d method i am passing hard coded values coming from left and top values; (example) if left and top values are 50 and 60 then i pass
translate3d(50,60,0) in html for particular image…

But this is not giving exact location of mouse point?? Please suggest any corrections over code?