jquery - find center part of image you are looking at on the screen

I am trying to add a graphic indicator on top of an image that I am looking at.开发者_如何转开发 I would basically put the DIV containing object with higher z-index on top of image I am looking at. The main image can be ANY SIZE.

So any ideas on how when I click "Add indicator", the indicator graphic would always be popped into view on top of the main image container (and not outside it) and viewable by me?

Another case is if image is very high (like 3000px height, it would require scrolling). So I might be viewing the bottom part of the image.

Any suggestions welcomed!

I hope this little solution will help you out. You can see it action here: http://jsfiddle.net/neopreneur/ZQqbQ/

In the second example, scroll the image and click the button to see the indicator re-center.

-css-

.fancy-img{
    display:inline-block;
    position: relative;
    max-height:400px;
    max-width: 300px;
    overflow: auto;
}

.indicator{
    width: 50px;
    height: 50px;
    border: 2px solid green;
    position: absolute;
}

-html-

<div class="fancy-img">
    <img id="img1" src="http://upload.wikimedia.org/wikipedia/en/7/72/Example-serious.jpg" alt="" />
</div>

<div class="fancy-img">
    <img id="img2" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/600px-Example.svg.png" alt="" />
</div>

-js-

$(document).ready(function(){
    // add indicator functionality for each img
    $('.fancy-img').each(function(){
        // button to toggle indicator
        $(this).after('<button class="indicator-btn" data-imageid="' + $(this).find('img').attr('id') + '" type="button">Adjust Indicator</button>');
    });    

    // handle button click
    $('button.indicator-btn').click(function(){
        var imgId = $(this).data('imageid');

        // insert indicator
        $('#' + imgId).before('<div class="indicator" />');

        // center indicator (also adjust for offset)
        var containerWidth = $('#' + imgId).parents('.fancy-img:first').width();
        var containerHeight = $('#' + imgId).parents('.fancy-img:first').height();
        var indicatorWidth = $('.indicator:first').width();
        var indicatorHeight = $('.indicator:first').height();
        var newIndicator = $('#' + imgId).parents('.fancy-img:first').find('.indicator');

        $(newIndicator).css({
            left: containerWidth/2 - indicatorWidth /2 + $('#' + imgId).parents('.fancy-img:first').scrollLeft(),
            top: containerHeight/2 - indicatorHeight/2 + $('#' + imgId).parents('.fancy-img:first').scrollTop()
        });
    });
});

Let me know if this has helped. Cheers!

well you use css absolute positioning and zindex to get it ontop? and use percent to positioning it in the center

edit: if you showed some html I could be a little bit more helpfull

example

<div style="position:relative;">
<div style="position:absolute; margin-left:50%; margin-top:50%;"></div>
<img src="image.jpg"/>
</div>

It should be very easy to do

1) Get the offset of the image you want

http://api.jquery.com/offset/

it provides you the top and left property's then use that position your div

make the div absolute position and give a better z-index.

Regarding the scroll problem use , document height and calculate the remaining space, based on that you can position your call out.

There are lot of plugins already availabe like tooltips, call outs etc, search in google also