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>