How to Overlap a Div on Specific Location of Image using JQuery?

Question

I have an Large Image on Web Page. And a div Below it containing Data. Now, When User Clicks on Button the Div containing Data Must be Overlapped on Image on Specific Location using JQuery.

<div>
<img src="Images/FLRegions.png" usemap="#planetmap" style="height: 766px; width: 776px;z-index:1;" class="map" />
</div>

<div id="destination">
This div contains Data which must overlap on Image on specific Location using JQuery
</div>

Help Appreciated! Thanks!

Answer 1

Put the div inside the other like this:

<div class="container">
    <img src="Images/FLRegions.png" usemap="#planetmap" style="height: 766px; width: 776px;z-index:1;" class="map" />
    <div id="destination">
        This div contains Data which must overlap on Image on specific Location using JQuery
    </div>
</div>

Then use CSS like this:

.container{
    position: relative;
}
#destination{
    position: absolute;
    top: 0;
    left: 0;
}

It can be moved dynamically with jQuery like this:

$('#button').click(function(){
    $('#destination').animate({
        left: 0, //enter your position
        top: 0  
    }, 500);
});