如何更改鼠标悬停在映射图像上显示的图像的位置？

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>