Mouseover image won't load in the right image holder

therio7 · December 8, 2009

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 · December 8, 2009

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 · December 8, 2009

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 · December 8, 2009

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 · December 8, 2009

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 · December 8, 2009

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 · December 8, 2009

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 · December 8, 2009

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 · December 8, 2009

'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 · December 8, 2009

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

Sign In

Mouseover image won't load in the right image holder

Recommended Posts

therio7

Link to comment

Share on other sites

mrMarcus

Link to comment

Share on other sites

therio7

Link to comment

Share on other sites

mrMarcus

Link to comment

Share on other sites

therio7

Link to comment

Share on other sites

mrMarcus

Link to comment

Share on other sites

therio7

Link to comment

Share on other sites

therio7

Link to comment

Share on other sites

mrMarcus

Link to comment

Share on other sites

therio7

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information