Page 1 of 1

placing php in javascript

Posted: Tue Sep 19, 2006 2:29 am
by nutstretch
I have a page which at present part of it is hardcoded but i wish to make dynamic.

The page shows 2 large pictures of a product. There are 3 different colours to this product which all have images. at present there are 3 small thumbnails which when you hover over change the large images to be the ones of corresponding colours.

This works lovely but what i would like to do as there will be other products added to the range is use the samepage for all the products.

I would like to create a string which is inserted into my javascript function for the images that pertain to the product in question.

I have created the string and inserted it into the javascript but the images are not showing.
Creating the string:

Code: Select all

$string = "";
while ($row = mysql_fetch_assoc($resultID)) 
{ 
$test =  "'designerscarfs/".$row['ProductCode'].".jpg' ,"; 
$string = $string.$test;
}
trimming the string to get rid of the "," at the end:

Code: Select all

$length = strlen($string)-1;
//set a variable to only show the string to the length determined above.
$preload = substr($string, '0', $length);
Add the string to the javascript:

Code: Select all

var srcs = [<?PHP $preload ?>];
when i run the page the images do not show up. please can anyone help me to see why

Thanks in anticipation

Nuts

Posted: Tue Sep 19, 2006 2:31 am
by volka
<?PHP $preload ?>
That doesn't do much. Maybe

Code: Select all

<?PHP echo $preload ?>
does.

btw
placing php in javascript
may be misleading. There may be javascript around the php script. But php does not bother when it's executing the script server-side, it does not know anything about javascript and its beeing executed client-side. Anything outside a php block is sent as-is to the client ...regardless of what "anything" is.

Posted: Tue Sep 19, 2006 2:35 am
by nutstretch
That made no difference it still doesn't show the images.

Thanks for the btw.

Posted: Tue Sep 19, 2006 2:36 am
by volka
more code then please.

Posted: Tue Sep 19, 2006 2:37 am
by arkady
nutstretch wrote:That made no difference it still doesn't show the images.

Thanks for the btw.
Could you show us the surrounding code where the <img src> tags are generated

Also check the generated page's source code and look for obvious typo/incomplete tags

Posted: Tue Sep 19, 2006 2:47 am
by nutstretch

Code: Select all

$string = "";
while ($row = mysql_fetch_assoc($resultID)) 
{ 
$test =  "'designerscarfs/".$row['ProductCode'].".jpg' ,"; 
$string = $string.$test;

}
// need to take the last character off the string so find out the lebgth of the string and take one away.
$length = strlen($string)-1;
//set a variable to only show the string to the length determined above.
$preload = substr($string, '0', $length);
$imagelength = strlen($test)-1;
$image = substr($string, '0', $imagelength);

mysql_close($linkID);
the java script:

Code: Select all

<script type="text/javascript">
function loadImg(img){
var imgName = "big4"; // name of the big image
var srcs = [<?PHP echo $preload ?>]; // array of SRC's for the big images

document.images[imgName].src=srcs[img];
}
</script>

adding the initial image to the page.

Code: Select all

<td><img src=<?php echo $image ?> width="300" height="425" alt="Cosmos Long scarf" name="big4" /></td>

mouseover script

Code: Select all

<a onMouseOver="loadImg(0);   return false;" onMouseOut="loadImg(1);  return false;"  href="designerscarfs.php?id=Cosmos">
      <img src="designerscarfs/cosmos orange 25.02-1SW_t.jpg" alt="Sheeting" width="90" height="64" style="border:2px solid #000000; width: 90px; height: 64px; "></a>

the image is not showing up when the page is displayed and the mouseover images are not working either.

thanks in anticipation

Nuts

Posted: Tue Sep 19, 2006 2:58 am
by arkady

Code: Select all

<?php echo $preload ?>

and

<?php $image ?>
Should produce error messages as you haven't included the trailing ;

Check the source code of the generated html page.. i suspect you'll have php warnings in the source code

Cheers

Posted: Tue Sep 19, 2006 3:06 am
by Luke
actually when it is just one statement like that the semi-colon is implied, so it's not necessary. there shouldn't be any warnings for those particular parts of the script

solved

Posted: Tue Sep 19, 2006 3:21 am
by nutstretch
Many thanks for all your help. the problem is solved

Posted: Tue Sep 19, 2006 3:24 am
by GM
Check your HTML source at the javascript function, to see what value $preload is echoing to the browser.

Posted: Tue Sep 19, 2006 3:30 am
by volka
Try

Code: Select all

<?php
$images = array();
while ($row = mysql_fetch_assoc($resultID)) {
	$images[] = "'designerscarfs/{$row['ProductCode']}.jpg'";
}
$preload = implode(',', $images);
?>
<html>
	<head>
		<title>...</title>
		<script type="text/javascript">
			function loadImg(img){
				var imgName = "big4"; // name of the big image
				var srcs = [<?php echo $preload ?>]; // array of SRC's for the big images
				
				alert(srcs);			
				document.images[imgName].src=srcs[img];
			}
		</script> 
[...]