CODEWITHSUNDEEP
javascripthtmlcss
Fred J.
Fred J.

Reputation: 6019

absolute position of image

This JS code tries to position an image element sigImg by setting its top and left properties to values obtained from a td element's getBoundingClientRect() so that the image covers the td.signLabel element, but the pages shows the image too far to the left and too far to to bottom of the td element.

Any idea why and how to make the image covers the td element? Thanks

let w = window.open();
let doc = w.document;
doc.write(html);
doc.close();

let sigImg = new Image();
sigImg.src = signature;
sigImg.id = 'sign';
sigImg.style.position = 'absolute';

let bounds = doc.querySelector('td.signLabel').getBoundingClientRect();
let top = bounds.top;
let left = bouds.left;

sigImg.style.top = top + 'px';
sigImg.style.left = left + 'px';
sigImg.style.backgroundColor = "yellow"; //for illustration
doc.body.appendChild(sigImg);

<tbody>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>User sign:</td>
    <td class="signLabel">Here:------------------</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</tbody>

Upvotes: 0

Views: 74

Answers (1)

epascarello
epascarello

Reputation: 207501

Put the image in the cell, set it to absolute.

td img {
position: absolute;
  opacity: .2;
}
<table>
  <tbody>
    <tr>
      <td>This is cell</td>
      <td>This is cell</td>
      <td>This is cell</td>
    </tr>      
    <tr>
      <td>This is cell</td>
      <td><img src="http://placekitten.com/g/200/300" /> This is image
</td>
      <td>This is cell</td>
    </tr>      
    <tr>
      <td>This is cell</td>
      <td>This is cell</td>
      <td>This is cell</td>
    </tr>      
  </tbody>
</table>

Upvotes: 1

Related Questions