[Plugin: WP-Table Reloaded] insert hover over "pop up" content and image?

hi Tobias,
Thanks for your response. Do you know where i need to insert such code? And do you know where can I find a sample code can do this? I’m not a coding expert, so I would need some help on coding.

Thanks again,
Darren

Tobias,
I made it work by using some javascript, it’s not perfect but good enough to get what i want.

Thanks,
Darren

Tobias,
First, for all the credits, I should give Eva who helped me.

The solution would be to use DHTML Window (v1.1) from Dynamic Drive

http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm script

Below you have an example and a how to

http://leetsee.com/table-and-dhtml-window

here is the detail how-to from Eva:
download the zip from here http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm script.
Then upload the files to your site’s folder
add this to your themes header:

<link rel="stylesheet" href="URL_TO_YOUR_FILES/dhtmlwindow.css" type="text/css" />
<script type="text/javascript" src="URL_TO_YOUR_FILES/dhtmlwindow.js">
/***********************************************
* DHTML Window Widget- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

edit the dhtmlwindow.js to adjust where are your files
I added URL_TO_YOUR_FILES/ there to get it display the buttons

imagefiles:[‘URL_TO_YOUR_FILES/min.gif’, ‘URL_TO_YOUR_FILES/close.gif’, ‘restore.gif’, ‘resize.gif’], //
Path to 4 images used by script, in that order
now you can go to your table, and add this to your cell (the div and the corresponding button)
Cell1 content:

<div id="tablecell1_content" style="display:none"><p style="height: 400px"><img title="DSCF5382" src="http://leetsee.com/wp-content/uploads/2011/04/DSCF5382-150x150.jpg" alt="" width="150" height="150" /> table cell 1 content here</p></div>
<a href="#" onClick="divwin=dhtmlwindow.open('divbox', 'div', 'tablecell1_content','Cell 1 title', 'width=450px,height=300px,left=200px,top=150px,resize=0,scrolling=0');return false"><b>click to open</b></a> your table's content here

————-
for each cell you need to add the corresponding content

<div id="tablecell2_content" style="display:none"><p style="height: 400px"><img title="DSCF5382"src="http://leetsee.com/wp-content/uploads/2011/04/DSCF5382-150x150.jpg" alt="" width="150" height="150" /> table cell 2 content here onmouseover</p></div>
<a href="#" onMouseOver="divwin=dhtmlwindow.open('divbox', 'div', 'tablecell2_content','Cell 2 title', 'width=450px,height=300px,left=200px,top=150px,resize=0,scrolling=0');return false"><b>mouseover to open</b></a> your table's content here and so on...

the easiest way to edit the “here you can add content and put images” is create a post (without saving it), upload the images, add the text and links, and when you are ready, view the html source and add it to your div, than copy the div and button to your table cell.

Hope it helps for everyone else who need this solution.

Darren