[RESOLVED] Javascript - Mouse over image popup on table
I’m writing because I need help with a problem that has been frustrating me for about a week now and I am desperate for a solution. I recently built my first website using PHP and MySQL and am trying to add feature/function that will pop up a photo thumbnail when the mouse is placed over a certain field in a table. I still want the field to link to the place it goes, just when you hover over it a thumbnail showing the image of the product appears e.g. a catalogue list that links to more information about a product but you can see the product from the catalogue list by hovering over a section (I hope this makes sense).
I can make an image popup but it seems to be the same image for every product, I want them to change as you hover over the different product ID’s. The code I have written so far:
What I am after is a photo thumbnail to popup showing the product when you hover over the Product_ID field. The photos are kept in a folder on the server with the photo’s name stored in the SQL db. If someone could help me with a way to do this and some code it really would be a big help. I’ve done a lot of reading on the internet over the past week and I seems that a lot of people are looking for the same sort of thing but no one can provide an accurate solution. Please help!!
There are some nesting problems with your code .e.g. missing </td>, </tr> and <div> in some places. It also looks like your missing the php tags <?php and ?> for the part just after the script.
It would have been more useful if you provided a link.
Regardless of those problems, the key problem is your not swapping the images each time you call showPopup. The image is fixed to ../photos/{$row['pix']}!
To fix this either pass in the image src to showPopup or work it out from the link in which your onmouseover is attached to. The former being preferable.
Thank you for your post. I am new to php, SQL and Javascript but its definitely been interesting learning. I agree with what you are saying (if I understand correctly) but the image names are stored in MySQL and not at set locations. I want the pic to change as you hover over different product_ID’s. i.e. I want the Pic field in MySQL to set the address e.g. '../photos/{$row['pix']}' with {$row['pix']} variable changing with hover. I hope this makes sense. Thanks again for all your help.
When the page loads it says down the botton done but with errors. These are the errors I get. When I check the lines of code there is no text there?????
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Timestamp: Fri, 28 May 2010 09:20:05 UTC
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test dirve</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#container {
position:relative;
}
#popup {
background-color:#fff;
border:1px solid #000;
padding:2px;
position:absolute;
z-index:10;
}
.hide {
display:none;
}
</style>
<script style="text/javascript">
var popup;
var loading = new Image(15, 15);
loading.src = 'http://www.havertys.com/wcsstore/Havertys/images/loading_small.gif';
window.onload = function()
{
popup = document.getElementById('popup');
popup.appendChild(loading);
var tds = document.getElementById('ptable').getElementsByTagName('td');
var totalTds = tds.length;
for (var i = 0; i < totalTds; i++)
{
if (tds[i].className != 'pid')
continue;
tds[i].onmouseover = function(){ showPopup(this); }
tds[i].onmouseout = function(){ hidePopup(); }
}
}
function showPopup(obj)
{
var pid = obj.innerHTML;
var x = obj.offsetLeft;
var y = obj.offsetTop;
popup.style.left = x + 5 + 'px';
popup.style.top = y + obj.offsetHeight + 5 + 'px';
popup.className = '';
var img = new Image();
img.onload = function(){
popup.innerHTML = '';
popup.appendChild(this);
}
img.src = 'http://www.foroswebgratis.com/imagenes_foros/5/4/7/4/9/691312naruto_shippuden_collection_v2_by_neon_drane.jpg';
}
function hidePopup()
{
popup.innerHTML = '';
popup.appendChild(loading);
popup.className = 'hide';
}
</script>
</head>
<body>
<div id="container">
<div id="popup" class="hide"></div>
<table id="ptable" cellpadding="4" cellspacing="1" border="1">
<tbody>
<tr>
<th>ID</th>
<th>Type</th>
<th>Price</th>
</tr>
<tr>
<td class="pid">1</td>
<td>Car</td>
<td>Honda</td>
</tr>
<tr>
<td class="pid">2</td>
<td>Car</td>
<td>Toyota</td>
</tr>
<tr>
<td class="pid">3</td>
<td>Bike</td>
<td>Ducatti</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Unluckily for me the laptop where I made that code only had Internet Explorer 8 w/ compatibility view. I tested it on FF, Opera, Safari and Chrome (latest versions).
I still can’t work out why this code from “letmehaveago” dosen’t work for me it seems to be exactly what I am after. I ran the original code with the google and web developer logo’s and it worked without fault. It was perfect!!! For some reason when I substitute in the PHP variables it all goes wrong. In IE when run it it says done but with errors (see last post for errors) when run on FF it loads fine but no pop up. Can anyone please help me fix this or is it impossible to add PHP variables to a mouseover popup? I would like to thank everyone who has been trying to help so far I really appreciate your efforts. Here are the two codes:
1) open the web page in your browser on your local or 'real' server (since it contains php code)
2) right click the web page and select 'view source'
3) scroll down to the above code and check that the php values that were substituted for the above variables are correct and that the syntax of the code inside the <a> is correct.
4) if the code inside the <a> is incorrect then either fix the syntax in the source code and/or go back to your "// php connection and row extraction script" and fix it so that the correct values are outputed.
[RESOLVED] Javascript - Mouse over image popup on table
Reply With Quote
Javascript - Mouse over image popup on table
Bookmarks