JQueryで画像上にボックスを表示するには？

Question

私は現在、人々の注釈が表示されるようにするイメージを持っています。注釈には、実際にイメージに相対するx、y座標、幅と高さがあります。今のところ、注釈に実際にテキストが含まれていないとしましょう。空白のボックスだけになります。

画像の上に空のボックスを表示すると、ユーザーが画像をクリックできるようになります。私は、注釈ボックスのz-インデックスを上げることを知っていますが、タグには画像しか含まれていないので、JQueryの挿入関数をどこで呼び出すか分かりません。私は画像をラップし、Jqueryを注釈divを画像の親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>') 

}); 

... :)