如何使用JQuery重叠图像特定位置上的Div？

我在网页上有一个大的图像。并在它下面包含数据的div。现在，当用户点击按钮时，包含数据的Div必须使用JQuery在特定位置上的图像上重叠。如何使用JQuery重叠图像特定位置上的Div？

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

帮助赞赏！谢谢！

来源

2013-04-10 SHEKHAR SHETE

你需要将'id = destination'上的css设置为'position：absolute; left：x; top：y; z-index：2;'和图像上的css到'position：relative;'当用户点击按钮时。这是重叠div或其他任何HTML元素的唯一方法。您还需要将目标ID放入包含图像的div内，否则它将不知道要重叠的内容。 – 2013-04-10 13:21:41

把股利其他内是这样的：

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

然后使用CSS这样的：

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

它可以动态使用jQuery移动这样的：

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

来源

2013-04-10 13:21:41 Bill

谢谢@Billy Mathews，这工作正常！ :) – 2013-04-10 13:34:53

如何使用JQuery重叠图像特定位置上的Div？

回答

相关问题