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

我现在有一个图像，我希望人们的注释显示在上面，其中注释实际上有一个相对于图像的x，y坐标，以及宽度和高度。假设现在注释中没有文本——它们只是空框

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

谢谢

这个怎么样

XHTML

jQUERY

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

});

$（文档）.ready（函数（）{
//在此计算注释文本
$（'.img container'）。追加（''+annotationText+''）
});

---

这应该开始了……：）

谢谢你，亚历克斯，效果很好。请问为什么img容器有一个位置：相对；tag？当然可以，Jasie！它有position:relative，所以所有position:absolute的子元素都是从父元素计算出来的？他们能在上面画一个矩形吗？或者他们必须提供坐标。你能给我们看一些（javascript）代码吗？：）Sweet，一个不错的jQuery插件，正是我想要的！

.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;
}

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

});