"WP-Table Reloaded" mouse over content (text/image) shows in a pop window? WordPress
- SOLVED
I'm using "WP-Table Reloaded" plugin in for creating tables for one of my pages, you can see here: http://chinavisiontour.com/tours/
What I'm trying to do is that to insert some texts and images in the table, when people mouse over, the content would show in a certain size pop window. Anyone familiar with this plugin and know how to do this?
PS. In plugin option, there are ways to insert link and image, however, the image will show on the webpage directly, I want it to be showed in a pop window. seen below.
Thanks.
Darren
Answers (1)
Eva answers:
the solution would be to use DHTML Window (v1.1) from Dynamic Drive
[[LINK href="http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm"]]http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm script[[/LINK]]
Below you have an example and a how to
[[LINK href="http://leetsee.com/table-and-dhtml-window"]]http://leetsee.com/table-and-dhtml-window[[/LINK]]
Darren Li comments:
Hi Eva, thanks for your info. I followed the how-to. however, the pop up window doesn't show up. here is the example code I post in my table cell<div id="tablecell1_content" style="display:none">
<p style="height: 400px"><img
src="http://chinavisiontour.com/wp-content/uploads/2011/04/hdchurch.jpg"
alt="" width="150" height="150" /> Hai Dian Church located in </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">click to open</a>
Any idea what's wrong?
Thanks,
Darren
Eva comments:
this needs to be added to header.php of your theme. In the source code I checked and I didn't saw it there, so there should you check first.
change the URL_TO_YOUR_FILES with the url of the files where the script and css is located.
<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>
Darren Li comments:
Hi Eva,
I did add the code in my header.php file, here is what I add <link rel="stylesheet" href="http://www.chinavisiontour.com/wp-content/themes/unlimited/dhtmlwindow/dhtmlwindow.css" type="text/css" />. Could be possibly I did wrong somewhere else?
<script type="text/javascript" src="http://www.chinavisiontour.com/wp-content/themes/unlimited/dhtmlwindow/dhtmlwindow.js">
</script>
Thanks,
Darren
Eva comments:
<div id="tablecell1_content" style="display:none"><p style="height: 400px"><img src="http://chinavisiontour.com/wp-content/uploads/2011/04/hdchurch.jpg"
alt="" width="150" height="150" /> Hai Dian Church located in </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">click to open</a>
what I noticed is a <br/> between <img and src=" in your source. In fact try to add this code and see if it is working.
Darren Li comments:
I add <br/>, "<p style="height: 400px"><br/><img src", but still is not working for me.
Eva comments:
you have the "extra" br right inside the <img
I attached the picture to see where is the issue. At least the only difference I see right now.