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

[mrMarcus]

the problem is that you have the same ID (image_holder) on the page several times over.  each ID must be unique.  try appending a unique number to the end, ie: image_holder_1, image_holder_2, etc.

 

change your javascript function to:

 

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

 

and update each large image holder like so with x being a unique value (1, 2, 3, etc):

 

echo "<img id='image_holder_x' border='1' width='400' height='300' src='images/transparent.gif' />";

 

and you will call each image to their holder like so:

 

onmouseover='show_large_image(this, 'x')

 

with x being the corresponding number as per the respective large image placeholder.

 

sorry, all the time i have for the night.  hope this at least set you on the right track as what you really need to keep in mind is that each ID needs to be absolutely unique for something like this to work.

[therio7]

Hi!

 

thanks for the quick response it's really appreciated. I get the point of unique Id now

 

so now my js code is:

 

<script language="JavaScript" type="text/JavaScript">
function show_large_image(obj, num)
{
var large_image_obj = document.getElementById("image_holder_"+num);
large_image_obj.src = obj.src;
}
</script>

 

php code:

 

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

 

And :

echo "<td align=center><img border='1' src='$PathG' onmouseover='show_large_image(this, 'x')' return false;\" width='100' height='70' />";

 

 

And there is no result on the page, Am I doing something wrong somewhere in the modifications?

 

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

 

 

Thanks again

 

 

[mrMarcus]

ok, you were almost there.  your function is fine.  but, in place of x needs to be a unique value.

 

let me try and explain this better.

 

right now you have three (3) large image place holders.  each of those id's needs to be different from one another.

 

#1

echo "<img id='image_holder_1' border='1' width='400' height='300' src='images/transparent.gif' />";

 

#2

echo "<img id='image_holder_2' border='1' width='400' height='300' src='images/transparent.gif' />";

 

#3

echo "<img id='image_holder_3' border='1' width='400' height='300' src='images/transparent.gif' />";

 

of course 1, 2, 3 can be substituted for really anything else, so long as they're different from eachother.  let's just stick with this for now.

 

OK.  that's done.  now, the thumbnails images below each large image placeholder need to work with their respective large image placeholder.

 

thumbnails under #1 large image placeholder:

echo "<td align=center><img border='1' src='$PathG' onmouseover='show_large_image(this, '1')' return false;\" width='100' height='70' />";

 

thumbnails under #2 large image placeholder (multiple images are fine, but make sure they call the correct # to the corresponding large image placeholder:

echo "<td align=center><img border='1' src='$PathG' onmouseover='show_large_image(this, '2')' return false;\" width='100' height='70' />";
echo "<td align=center><img border='1' src='$PathG' onmouseover='show_large_image(this, '2')' return false;\" width='100' height='70' />";

 

thumbnails under #3 large image placeholder:

echo "<td align=center><img border='1' src='$PathG' onmouseover='show_large_image(this, '3')' return false;\" width='100' height='70' />";

 

hope that clears things up.

 

EDIT: just a thought.  why not have a default image in those placeholders, instead of the transparent image?  makes the page look finished.

[therio7]

Ohhh ok I completely understand , I think I maybe forgot to mention something about website.

 

This is a website that can be updated, add content, delete content etc.. thru the admin control panel. So I dont know in advance if there gonna be 3 or 4 or 10 image_holder.

 

This is a loop that run thru my database and display (title, text and thumbnails) in blocks.

 

I'm pretty sure I should add some extra code around my //MY LARGE IMAGE HOLDER TABLE comment in my code (some sort of counter that will match the number given by the javascript??) but I dont know how to code it

 

It may not be clear and its ok if you dont understand my specific problem.

 

 

[mrMarcus]

i know what you're saying.

 

<?php
$result = mysql_query("
SELECT *
FROM `AlbumTable`
WHERE `AlbumCategorie` = 'Que se passe t-il'
ORDER BY `AlbumId` DESC
");
if (mysql_num_rows ($result) > 0)
{
$i=1; //start counter;

while ($row = mysql_fetch_array ($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_".$i."' 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
	");

	if (mysql_num_rows ($result2) > 0)
	{
		while($row = mysql_fetch_array ($result2))
		{
			if ($col == 0)
				echo "<tr>";
				$PathG = '/' . 'tdj' . $row['PhotosPathG'];
				echo "<td align=center><img border='1' src='{$PathG}' onmouseover='show_large_image(this, '".$i."')' 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>";

	$i++; //increment counter +1;
}
}
?>

 

try that.  $i becomes your incremental, unique value for each large image placeholder.

 

EDIT"  i don't like the one line in there:

 

echo "<td align=center><img border='1' src='{$PathG}' onmouseover='show_large_image(this, '".$i."')' return false;\" width='100' height='70' />";

 

change it to:

 

echo '<td align=center><img border="1" src="'.$PathG.'" onmouseover="show_large_image(this, \''.$i.'\'); return false;" width="100" height="70" />';

[therio7]

Hi,

 

Thanks again for your time its really appreciated.

 

 

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

 

Ive uploaded the new version and I got an error on line 183

 

any idea why ?

 

line 183 is :

if (mysql_num_rows ($result) > 0)

 

 

and the new code is:

$result = mysql_query("
SELECT *
FROM 'AlbumTable'
WHERE 'AlbumCategorie' = 'Que se passe t-il'
ORDER BY 'AlbumId' DESC
");
if (mysql_num_rows ($result) > 0)
{
$i=1; //start counter;

while ($row = mysql_fetch_array ($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_".$i."' 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
	");

	if (mysql_num_rows ($result2) > 0)
	{
		while($row = mysql_fetch_array ($result2))
		{
			if ($col == 0)
				echo "<tr>";
				$PathG = '/' . 'tdj' . $row['PhotosPathG'];
				echo '<td align=center><img border="1" src="'.$PathG.'" 

onmouseover="show_large_image(this, \''.$i.'\'); 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>";

	$i++; //increment counter +1;
}
}

 

 

 

[therio7]

I dont know if it can help but Ive made 2 print screen of my DB, one of my PhotosTable and one of my AlbumTable

 

http://www.vitrail-entete.com/tdj/PhotosTableDB.jpg

http://www.vitrail-entete.com/tdj/albumTableDB.jpg

 

 

[mrMarcus]

'cause you changed the code i gave to you.  people seem to enjoy doing that

 

in both your queries you have replaced the backticks ` i put in with single-quotes ' .. this will cause an error as field names cannot be delimited with quotes.  the use of backticks is not mandatory, however, they are a good practice since MySQL has reserved words and if you were to name a field in your database the same as one of these reserved words without a delimiter (`reserved_word`), the query would break.

 

change your first query back to:

 

$result = mysql_query("
SELECT *
FROM `AlbumTable`
WHERE `AlbumCategorie` = 'Que se passe t-il'
ORDER BY `AlbumId` DESC
");

 

and you second query back to:

 

$result2 = mysql_query("
		SELECT *
		FROM `PhotosTable`
		WHERE `PhotosId` = '{$AlbumId}'
		ORDER BY `Date` DESC
	");

 

just keep this in mind.

[therio7]

yessssss, everything works fine now! Thanks to you!!

 

Haha, the reason I changed the '  is because I thought my french keyboard settings did something wrong with the cut/paste of your code in my document.

 

I'm really glad everything works fine cause its only my 2nd website using php,mysql and i'm still learning.

 

Thank you!!