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

**URL:** <https://forum.kirupa.com/t/need-to-place-several-png-images-over-single-background-png-image-at-particular-location/645038>\
**Category:** web dev\
**Created:** [November 23, 2020, 5:45am UTC](https://forum.kirupa.com/t/need-to-place-several-png-images-over-single-background-png-image-at-particular-location/645038 "2020-11-23T05:45:17Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anandhanatarajan](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/anandhanatarajan/32/12920_2.png) [@Anandhanatarajan](https://forum.kirupa.com/u/Anandhanatarajan)\
**Post date:** [November 23, 2020, 5:45am UTC](https://forum.kirupa.com/t/need-to-place-several-png-images-over-single-background-png-image-at-particular-location/645038/1 "2020-11-23T05:45:18Z")

</div>

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?