Javascript/AJAX?????

[Gards035]

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).

The code I have written so far to populate the table looks like:


$query=" SELECT * FROM table";
$result=mysqli_query($cxn,$query)or die("Couldn't execute query.");

while($row = mysqli_fetch_assoc($result))
{
$f_price = number_format($row['price'],2);

echo "<table class='Products' cellspacing='0'
width='100%'>";
echo "<tr><th class='head'>Product ID</th><th class='head'>P_type</th><th class='head'>Price</th>
</tr>\n";
echo "<tr class= 'trow'>\n";
echo " <td class= 'item'><a href='result.php?product_ID={$row['product_ID']}'>{$row['product_ID']}</a></td>\n";
echo " <td class= 'item'><a href='result.php?product_ID={$row['product_ID']}'>{$row['P_type']}</a></td>\n";
echo " <td class= 'item'><a href='result.php?product_ID={$row['product_ID']}'>$f_price</a></td>\n";

}
echo "</table>\n";


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!!

 

[vacunita]

Assuming the path to the image is also acquired from your DB in your query, you could simply add an <img> tag to the <td> or wherever it is you want to display the images, set its display to none so they are all hidden to begin with, and change it in the onmouseover event of the link to be shown.

echo " <td class= 'item'><a href='result.php?product_ID={$row['product_ID']}' [blue]onmouseover='Toggle_Image(". $row['product_ID'] . "'[/blue][blue]onmouseout='Toggle_Image(". $row['product_ID'] . "'[/blue]>{$row['product_ID']}</a>[red]<img src='" . $row['pathtoimage'] . "' style='position:absolute; display:none;' id='". $row['product_ID'] ."'>[/red]</td>\n";

Then just put the function in between script tags in your header tag.

<script>
function Toggle_Image(imgid){
var myimg=document.getElementById(imgid);

if(myimg.style.display=='none' || myimg.style.display==''){
myimg.style.display='block';
}
else{
myimg.style.display='none';
}
}
</script>

NOTE: I typed this straight into the reply box so there could be some errors. But you should get the idea.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.