Href variable doesn't pass from function

cruzer

06-06-2007, 02:42 PM

I'm a newbie to javascript. I have a PHP program with an HTML table. This table displays 4 thumbnail images on the right and one larger image on the left. Whenever I click on a thumbnail, the larger image updates accordingly. So far, so good.

However, underneath the larger image I have a text hyperlink to display that image in a new window at an even larger resolution. the problem is that I can pass the image number to my functions but as soon as the larger image redraws, that variable is gone and I can't use it to display the proper full screen image in the new window. It always defaults to image #1. I've tried using PHP variables within the javascript but it's just not working.

Following is an excerpt of my code:

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<script type="text/javascript">
var imageprefix = "image_";
var superprefix = "super_";
var imageid = "1";
function pict(A)
{
var image = document.getElementById('MyImage');
image.src = (imageprefix + A + '.jpg');
}
</script>
</head>
<BODY>
<table border="0" width="100%" style="border-collapse: collapse">
<tr>
<td rowspan="2" width="70%">
<p align="center">
<img border="0" src="image_1.jpg" id="MyImage"></p>

<p align="center">
<script>document.writeln("<a target='_blank' href='"+superprefix+imageid+".jpg'>Click Here to Display Full Screen Image</a>");</script>
</p></td>

<td align="center">
<img border="0" src="thumb_1.jpg"
onclick="return pict(1);"></td>
<td align="center">
<img border="0" src="thumb_2.jpg"
onclick="return pict(2);"></td>
</tr>
<tr>
<td align="center">
<img border="0" src="thumb_3.jpg"
onclick="return pict(3);"></td>
<td align="center">
<img border="0" src="thumb_4.jpg"
onclick="return pict(4);"></td>;
</tr>
</table>
</BODY>
</HTML>

cyberlogi

06-07-2007, 12:48 AM

Actually, it did work. Your PHP variable is 1, so it is always one and you never use JavaScript to update the href. You have to remember that PHP is a server-side language and JavaScript a client-side. You can use PHP to write JavaScript when the page loads, but can never use JavaScript to write PHP. And once the page is served to the client, your PHP code has already been executed and is complete.

change

<script>document.writeln("<a target='_blank' href='"+superprefix+imageid+".jpg'>Click Here to Display Full Screen Image</a>");</script>

to

<a target='_blank' href='javascript:void(null)' id="MyLink">Click Here to Display Full Screen Image</a>

Then add

var link = document.getElementById('MyLink');
link.href = imageprefix + A + '.jpg';

to your pict function. That should fix your problem.

cruzer

06-07-2007, 04:29 PM

That worked!
Thanks, that was the part I was missing.