Как отобразить прямоугольники над изображением с помощью JQuery?

Question

В настоящее время у меня есть изображение, на котором я хочу, чтобы аннотации людей отображались, где аннотации фактически имеют координаты x, y относительно изображения, а также ширину и высоту. Допустим, на данный момент аннотации не содержат текста - они будут просто пустыми полями.

Мне интересно, как лучше всего отобразить пустое поле поверх изображения, чтобы пользователь мог щелкнуть по нему. Я знаю, чтобы поднять z-индекс окна аннотации, но я не уверен, где бы я вызвал функцию вставки JQuery, так как тег может содержать только изображение. Должен ли я обернуть изображение в a и вызвать 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>')

});

Это должно прокатиться ...:)