Mouseover image won't load in the right image holder

[therio7]

Anyone can help me with my code?

If you look at my page

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

When you mouseover the thumbnails on each row all the larger images appear in the top image holder (the one in the first row).

I'd like to have the images appear in the large image holder just above their thumbnail set

Any idea ?

I'm new with php, javascript.


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

[Dormilich]

so, what’s the problem?

[hsriat]

Hi thereo7,

There are a couple of mistakes. If you check the source of your HTML (the one you get doing 'view source'), all your image holders have same ids, i.e. 'image_holder'. So when with JavaScript, you change the source of the image holder at 'onmouseover' event of the thumbnails, you are changing the src of the first image holder only.

To solve, use different ids for your image holders e.g. image_holder_1, image holder_2 etc. In your JavaScript, rather than passing just one argument to the function, pass two. One obj (as its already there), and another as the image holder's number.

function show_large_image(obj, holderNum) {
    document.getElementById("image_holder_" + holderNum).src = obj.src;
}

Another mistake is, while writing JavaScript inside HTML tag, make sure you make the correct use of quotes. Check the following error on this page.

Error: Line 161, Column 667: "RETURN" is not a member of a group specified for any attribute

[therio7]

Problem solved

Thank you,

My problem is solved now.