Question

我目前有一个图像，我希望人们的注释出现，其中注释实际上具有相对于图像的x，y坐标，以及宽度和高度。我们现在说，注释实际上并没有文本 - 它们只是空盒子。

我想知道在图像上显示空框的最佳方法是什么，这样用户就可以点击它。我知道要提高注释框的z-index，但我不确定在哪里调用JQuery插入函数，因为标记只能包含图像。我应该将图像包装在一个并调用Jquery插入注释divs到图像的父div吗？

谢谢！

Answer 1

这个怎么样？

XHTML

<div class="img-container">
   <img src="image.jpg" alt="" />
</div>

CSS

.img-container {
    display: block;
    width: 300px;
    height: 300px;
    position: relative;
}

.img-container img {
    display: block;
    width: 100%;
    height: 100%;
}

.img-container span {
    display: block;
    width: 50px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
}

JQUERY

$(document).ready(function() {
    // calculate the annotation text here
    $('.img-container').append('<span>' + annotationText  + '</span>')

});

那应该滚动......：）

如何使用JQuery在图像上显示框？

1 个答案: