Have Geek Brain

How to display margins above an image using JQuery?

I currently have an image where I want people annotations to display, where the annotations actually have an x, y coordinate relative to the image, as well as width and height. Let's say now the annotations don't actually contain any text in them - they'll just be empty.

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

Thanks!

+1


a source to share


1 answer


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

});

It should work ... :)

+2


a source






More articles:


All Articles