将div附加到图像

Question

是否可以将div附加到图像上？如在，使div跟随图像？我有一个网页应用程序，用户可以点击页面的一部分，然后图像移动到缓动。我想要一个讲话泡泡来跟随形象，并保持在它之上，但我很难找出这需要什么。

任何指导表示赞赏！

问候

Answer 1

当我应该这样做，我会创建包含图像和语音泡沫DIV核实。

<div class="topelement"> 
    <img src="#" /> 
    <div class="speechbubble"></div> 
</div> 

然后，当用户点击页面的某个部分，您可以移动与de class“topelement”div。

希望这有助于

Answer 2

如果这是该用户需要点击的元件：一旦用户点击的是，下面的滑块将被显示

<div id="showImage"> 
    Show the image 
    </div> 

<div class="divSlider"> 
    <img src="http://images6.fanpop.com/image/photos/33100000/justin-bieber-2013-justin-bieber-33194067-1295-1500.jpg" /> 
    <div class="speechbubble">Your bubble message here!</div> 
</div> 

CSS：

.speechbubble { 
    background-image: url("http://www.clker.com/cliparts/K/k/N/x/a/k/dialog-bubble-rectangle-md.png"); 
    width: 100px; 
    height: 100px; 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index: 100; 
    right: 0px; 
    position: absolute; 
    padding: 20px 30px; 
    color: red; 
} 
.divSlider { 
    width: 350px; 
    height: 300px; 
    position: relative; 
    display: none; 
} 
img { 
    float: left; 
    width: 300px; 
} 

默认情况下，将CSS隐藏在CSS本身中。

现在的jQuery：

$(function() { 
    $("#showImage").click(function(){ 
     $(".divSlider").fadeIn(2000); 
    }); 
}); 

Working Demo