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

我目前有一张图片，我希望人们的注释显示在其中注释实际上具有相对于图像的x，y坐标以及宽度和高度。现在让我们说注释实际上并没有文字 - 它们只是空的框。如何使用JQuery在图像上显示框？

我想知道什么最好的方式来显示图像上的空盒子，使用户可以点击它。我知道要提高注释框的z-index，但我不确定我会在哪里调用JQuery插入函数，因为标记只能包含图像。我是否应该将图像封装在a中并调用Jquery将注释div插入到图像的父div中？

谢谢！

来源

2009-05-22 ash

嗨亚斯，我很好奇：你如何让你的用户注释图像？他们能在它上面画一个矩形吗？或者他们必须提供坐标。你能告诉我们一些（JavaScript）的代码吗？ – hopla 2009-05-25 15:52:00

http://odyniec.net/projects/imgareaselect/ :) – ash 2009-05-27 22:00:37

这个怎么样

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>') 

});

，应该让滚动... :)

来源

2009-05-22 04:16:11 alex

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

回答

相关问题