html - 如何更改通过鼠标悬停在映射图像上出现的图像的位置？

Question

我正在做这样的事情 http://jquery-image-map.ssdtutorials.com/ 当我将鼠标悬停在现有的映射图像上时，新的图像和段落出现了，但我无法改变它们的位置。我尝试使用 CSS，但没有任何效果。它们总是出现在屏幕的右上角。帮助将不胜感激！

<div id="inside" 
    onmouseover="document.getElementById('div2').style.display = 'block';"  
    onmouseout="document.getElementById('div2').style.display = 'none';">
<area shape="poly" id="cr1" class="jTip" coords="550,277,485,342,533,385,597,322"
href="car_park_1.html" alt="cr1" name="room-1">
</div><!-- element inside brackets will be shown-->

这是图像和段落出现的代码：

<div id="div2" style="float: left;">    <!--things to show on mouse hover appear here -->
<img src="fun_ahead.gif" class="thumb_cr1" height"100px" width="90" style="float:left;"/>
<p class="thumb_cr1"> hellooo </p>
</div>