I'm working on a website that requires multiple rollover popup profiles on a single page. Ideally, the image would be on the left, and the text on the right, but the text underneath the image would be fine as well.

I've found a simple enough jquery that seems to work well enough, except it's not letting me add an image to the pop up.

The 'link' to the popup is text, so apparently it's not as simple as thumbnail images.

I've tried img srcs, and adding tables into the 'Foo'bar part, but the images never show up.

Any tips or advice would be really appreciated!

What I've got:

<td valign="middle"><p><img src="images/profiles/thumbnails/sample.png" align="center" height="50" width="50" /></p></td>
<td valign="middle"><p>&nbsp;Name</p></td>
<td valign="middle"><p>&nbsp;<a href="mailto:email here"><i class="icon-envelope-alt"></i>&nbsp;Email</a><br />&nbsp;<i class="icon-phone"></i>&nbsp;Phone 999-999-9999</a></p></td>
<td valign="middle"><div onmouseover="showBox('<img src='images/profiles/full/sample.png'>'<br /> Lorem Ipsum Profile info', this)" onmouseout="hideBox()"><span style="color:#0D76B3">&nbsp;<i class="icon-info-sign"></i>&nbsp;Profile</span></div></td>

What the jquery is:

<script type="text/javascript">
function showBox(text, obj) {
helpNode = document.createElement('div');
helpNode.id = 'popBox';
helpNode.innerHTML = text;

function hideBox() {
node = document.getElementById('popBox');

<div onmouseover="showBox('<b>Foo</b><br /> Baaaaaaaaaaaaaaaaaaaar', this)" onmouseout="hideBox()"><span>hallo</span></div>
<div onmouseover="showBox('<b>Bar</b><br /> Baaaaaaaaaaaaaaaaaaaar', this)" onmouseout="hideBox()"><span>hallo</span></div>
<div onmouseover="showBox('<b>Biz</b><br /> Baaaaaaaaaaaaaaaaaaaar', this)" onmouseout="hideBox()"><span>hallo</span></div>
<div onmouseover="showBox('<b>Biiz</b><br /> Baaaaaaaaaaaaaaaaaaaar', this)" onmouseout="hideBox()"><span>hallo</span></div>