Help, onmouseover won't work, images from a mysql query loop

[therio7]

Hi everyone,

I hope someone can help me, here's my problem:

I have a php script that retreive photos from a mysql db (and place it on my page into a loop in the right album section), I dont know if you understand what I mean but if you have a look at it i'm sure you'll understand

http://www.vitrail-entete.com/tdj/quoi_de_neuf.php

What I need is when the user places his cursor over the thumbnail, the larger image of the thumbnail should appear in the frame just over the thumbnail row.

And part of my 'unworking' code is:

....

echo "<table border=0 width=510>";
echo "<tr>";
echo "<td align=center colspan=4>";
echo "<img id='larger' border=1 width=400 height=300>";
echo "</td>";
echo "</tr>";
echo "</table>";

$col = 0;
echo"<center>";
echo "<table border=0 width=210>";


$AlbumId = $row[AlbumId];
$result2 = mysql_query("SELECT * FROM PhotosTable WHERE PhotosId = '$AlbumId' order by Date DESC");
while($row = mysql_fetch_assoc($result2)) {


if ($col == 0)
echo "<tr>";
$PathG = '/' . 'tdj' . $row['PhotosPathG'];
echo "<td align=center><img border=1 src='$PathG' onmouseover='getElementById(larger).src='$PathG' width=100 height= 70'>";
echo "</td>";
$col++;
if ($col == 4)
{
echo "</tr>";
$col = 0;
}
}

echo "</table>";
echo "</center>";

......

Thank you

<img border='1' src='$PathG' onmouseover=\"getElementById('larger').src=$PathG; return false;\" width='100' height= '70' />

Close the tag and place larger within quotes - check your quotes!

IF this doesn't work, try setting the src of the large image on load:

<img id='larger' border='1' width='400' height='300' src='' />

If you get a horrible 'image not found icon', just substitute the blank src for a 1px image.

However, there is a better way of doing this via a function call:

http://www.w3schools.com/jsref/prop_img_src.asp

This way you can send other image properties as well, e.g. width, height.
Are all your images 4:3? If not, you could try just setting the width property of the image to 400 and leaving out the height altogether. This will keep the image scaled. Just a thought.

[therio7]

Thank you very much for your time, i'll try it !!

[therio7]

Now i've solved 50% of my problem,

Whats happening now is that all the larger images appear in the same image holder (the one in the first row).

Any idea ?

I'm not a php expert but I guess my Image holder table is not at the right place in the code?

Javascript code...

function show_large_image(obj)
{
 var large_image_obj = document.getElementById("image_holder");
 large_image_obj.src = obj.src;
 }

Php code...

$result = mysql_query("SELECT * FROM AlbumTable WHERE AlbumCategorie = 'Que se passe t-il' order by AlbumId DESC");
while($row = mysql_fetch_assoc($result)) {


//MY TITLE AND TEXT TABLE
echo "<span class='style1'>";
echo "<table border=0 width=510>";
echo "<tr>";
echo "<td align=center><b>$row[AlbumTitre]</b>";
echo "</td>";
echo "</tr>";

echo "<tr>";
echo "<td align=center>$row[AlbumTexte]";
echo "<br><br>";
echo "</td>";
echo "</tr>";
echo "</table>";

//MY LARGE IMAGE HOLDER TABLE
echo "<table border=0 width=510>";echo "<tr>";
echo "<td align=center colspan=4>";
echo "<img id='image_holder' border='1' width='400' height='300' src='images/transparent.gif' />";
echo "</td>";
echo "</tr>";
echo "</table>";


//MY THUMBNAILS TABLE
$col = 0;
echo"<center>";
echo "<table border=0 width=210>";


$AlbumId = $row[AlbumId];
$result2 = mysql_query("SELECT * FROM PhotosTable WHERE PhotosId = '$AlbumId' order by Date DESC");
while($row = mysql_fetch_assoc($result2)) {


if ($col == 0)
echo "<tr>";
$PathG = '/' . 'tdj' . $row['PhotosPathG'];
echo "<td align=center><img border='1' src='$PathG' onmouseover='show_large_image(this)' return false;\" width='100' height= 

'70' />";
echo "</td>";
$col++;
if ($col == 4)
{
echo "</tr>";
$col = 0;
}
}

echo "</table>";
echo "</center>";
echo"<br><br><br>";
echo "</span>";
}

Anyone know the problem?
Thanks in advance for your help

show_large_image(this)';return false;

You need a ';' before the 'return false'.

[therio7]

Thank you, my problem is now solved.