Image in Div Background

[treeleaf20]

All,
Say I have the following divs on my page:

<div class="fn-area" id="69" style="left: 133px; top: 81px; width:97px; height: 230px;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="69" style="position:relative;"></div> 
<span class="fn-note-content">creep</span>  </div>
</div>
<div class="fn-area" id="70" style="left: 386px; top: 143px; width:136px; height: 129px;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="70" style="position:relative;"></div> 
<span class="fn-note-content">creep</span>  </div>
</div>
 <div class="fn-area" id="71" style="left: 43px; top: 344px; width:151px; height: 222px;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="71" style="position:relative;"></div>

For the class "fn-area" it's different sizes for each div on the page. Can I use Javascript to get these coordinates and when I onmouseover this div I'd like an image to be displayed with the same coordinates and same size as the div? I want to use the same image for each rollover so the image would have to get resized for each rollover. How can this be done? Thanks in advance.

[ptejada]

You will be lucky if anyone even take a look at your code, im sorry but is a mess...

[justinbarneskin]

Yes, set all the DIVs to their combined average size height & width.
Set their background-position: center center
background-repeat: no-repeat

No re-sizeing needed