How to display boxes over an image with JQuery?

Question

Hi all,

I currently have an image that I want people's annotations to show up on, where the annotations actually have an x,y coordinate relative to the image, as well as a width and height. Let's say for now the annotations don't actually have text in them -- they'll just be empty boxes.

I'm wondering what the best way to display an empty box over the image would be, such that the user could click it. I know to raise the z-index of the annotation box, but I'm not sure where I would call the JQuery insert function, since the tag can only contain an image. Should I wrap the image in a and call Jquery insert annotation divs into the parent div of the image?

Thanks!

Answer 1

What about this

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

});

That should get rolling... :)