動態在圖像頂部添加元素

Question

當我單擊按鈕時，它必須在 div 和帶邊框的圖像內添加一個對象 (img, p)，然后獲取該對象的位置 (x, y 坐標)。

我怎樣才能使用 JQuery 做到這一點？

HTML :

<div style="height: 440px; border: 1px solid; width: 880px; margin-top: 50px; margin-left: -12px;">
    <img id="imagem-principal" width="880" height="440" class="custom_media_image attachment-post-thumbnail" src="<?= $segunda_imagem; ?>">
</div>

Answer 1

要讓按鈕創建一個新的<img>並將其放在頂部，請添加以下樣式：

div {
    position: relative;
}
img:not(#imagem-principal) {
    position: absolute;
}

然后，您可以在 jQuery 中添加一個onclick偵聽器：

$("#addImg").click(function() {

    // set x and y to what you want
    var xCoor = // X_COORDINATE;
    var yCoor = // Y_COORDINATE;

    var newImg = $("<img src='/* IMAGE_URL */' />");
    newImg.css({left: xCoor, top: yCoor});
    $("div").append(newImg);
});

這將在另一個圖像的頂部創建一個具有給定x和y坐標的新圖像。

請參閱JSFiddle.net上的工作示例。