How to lay an image over an image in table cell-CodePudding

I'm trying to lay an image on top of an image in a table cell (if you click on it).

<table>
  <tr>
    <td style="background-color:Gray;"><a id="firstcell" onclick="addImage"><img scr="snowman.png"></a></td>
  </tr>
...
</table>

Here is the addImage function:

function showMoves(fig_name,pos) {
        var image = document.createElement("img");
        var imageParent = document.getElementById("firstcell");

        image.src = "circle.png";
        image.style.position = "absolute";

        imageParent.appendChild(image);
    }

I tried it with absolute position, but it is on the right side of the table cell and not directly on top.
I clicked on the Lightgray cell and it place it over the gray one.

The important thing is to add the circle with a function that is executed when you click on the snowman and the circle has to be above. Or is there a different way to mark cells in a table?

CodePudding user response：

It's much easier to assign a class to the image and then style that class as per the code below:

window.onload = () => {
  document.getElementById('firstcell').addEventListener('click',addImage);  //I've moved this from the 'onclick' attribute in your html to the window.onload event. It's better practice.
}

function addImage() {
  var image = document.createElement("img");
  var imageParent = document.getElementById("firstcell");

  image.src =  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAAAAABVicqIAAAALHRFWHRDcmVhdGlvbiBUaW1lAFdlZCAyNSBKYW4gMjAyMyAxNzozMTozNyAtMDAwMLY8BBsAAAAHdElNRQfnARkRICUUgImdAAAACXBIWXMAAAsSAAALEgHS3X78AAAABGdBTUEAALGPC/xhBQAAAAJ0Uk5TAP9bkSK1AAAB3ElEQVR42u2a0Q7DIAhFhf//5y5L1lUUFZTrtmY8LJmKx0trq1I6ksfo eNzeXqZPUj 9ZBsENKLraAxhPrVFtAIogWpxI7H2WtB/X4G1SaIoQ8jpgmx luatSBkioMEtQUfU26 IakQjwzLqDSInzFwqiHeUBkoFWRKxsCzhMwz3s61bwFpNVujsNJ0mvHyrB6pEjL3ThpSBGSZ0aDkELL3NaJ0lKwLSeorJ4MEBKtBuSAhwdKDwYP6acvHzKIwiFF2w73KKClcF8VL4XbVKuUaN8sKjL0gsdEqpfBCR04l4UI0yCkw2M6xw8KVj5m1wmjjXBZKCtdFgUYSArVtEPAsgSshNOS6l2514Slh5/vNwvWHuCBy fLLSn4aoq4gEXa8IdhnCl7JByCYiXJkEMhFUXZa0DkPuybq7hch5bwMLP6BbOctHC5FrE7KAxykkmiKXGZh9iedk7vYgCk7LT3HEyOkvIUxJ2uIfXzvXDgqYPXxHKtNYhnx513aIOvjwTUpakpAhmuZoqcduNkyjvGRJM2edNOexNmsGF8KcIriT2buScs6xUwmmFM WXCpcpv/atJf9lH106lyQpLtEbP2IYYFE/FJSRcU93FMAxT/mc i3W/3 4d8D QBTk2Hi2UsNw8AAAAASUVORK5CYII="; //this is just a png of a circle encoded in to base 64 so it'll work on this site 
  image.className = "overlay"; //rather than using inline styles, just set the classname to overlay and then you can use as much css as you like to get the effect you want.
  imageParent.appendChild(image);
}

img { 
display: block; /* remove that annoying space at the bottom of inline items */
}

td {
  position: relative; /* this creates a new containing block so we can position the overlay image relative to the table cell */
}

.overlay {
  position: absolute;
  left: 3px; /* 3px from the left of the table cell and... */
  top:5px; /* 5px from the left of the table cell and... */
}

<table>
  <tr>
    <td style="background-color:Gray;"><a id="firstcell"><img src="https://picsum.photos/id/64/100/100"></a></td>
  </tr>
</table>