Help with javascript var and PHP loop

sks1024

I have a table that has thumbnails in the bottom row that enlarge in a td above them when clicked on with some javascript

i.e

<head>
<script>
function changeImage(filename)
{
mainimage.src = filename;
}
</script>
</head>

The problem is when I use a while loop to output the results, I need to change the name of the javascript var "mainimage" in the function. When there is more than one record then there become 2 (or how ever many records are output) <img name=mainimage> tags and the javascript function fails. Works fine with only one record output.

Thanks,
Stan

TF_TheMoon

You want something like this

<html>
<head>
<script>
<!--
function changeImage( mainimage, filename)
{
mainimage.src = filename;
}
//-->
</script>
</head>
<body>
<img name="mainimage1" src="/land_sales/upload_pics/pic_1.jpg" border="1"><br />
<a href="javascript:changeImage(mainimage1,'banana.gif')">go</a><br /><br />

<img name="mainimage2" src="/land_sales/upload_pics/pic_1.jpg" border="1"><br />
<a href="javascript:changeImage(mainimage2,'banana.gif')">go</a><br /><br />

<img name="mainimage3" src="/land_sales/upload_pics/pic_1.jpg" border="1"><br />
<a href="javascript:changeImage(mainimage3,'banana.gif')">go</a><br /><br />

</body>
</html>

Basically, each mainimage image tag should be have a unique ID, in the example above that is mainimage1 mainimage2 and mainimage3.

Then modify your function to accept two parameters, 1 is the element who's src should be changed the 2nd is the file to change to.

Lastly modify your call to the changeImage function to pass the id of the element where you wish the image to be displayed to.

This example will work in both IE and firefox as you are passing the element itself by reference so no need to call something like getElementById()

sks1024

The problem still remains that the img tag where the image id to be displayed is still named mainimage. This needs to be what ever the thumbnail image is named to make it apper which has to be different with each image according to your example.

These php variables as image names are pulled from a DB also

// This is the tag where the image is diplayed large
<img name=mainimage src=/land_sales/upload_pics/$pic_1 border=1>

//This is the thumbnail link
<a href=javascript:changeImage($pic1_num,'/land_sales/upload_pics/$pic_1')><img name=$pic1_num src=/land_sales/upload_pics/$pic_1 border=0></a>

Thanks

Weedpacket

Well, you can have PHP name the large image dynamically the same way you're having it name the thumbnail dynamically (and if they're all supposed to be different then "id" would be a better attribute to use than "name", as TF@TheMoon suggested).

TF_TheMoon

Okay let me see if I have this right, you actually want multiple img tags with the same name (mainimage)? Normally you try to avoid this. That is why it will error. If you nave >1 element with the same name or the same ID then you can not referrer to that as element.scr you need to treat it as an array. element[0].src

So in that case you want this

<script>
<!--
function changeImage( num, filename)
{
mainimage[num].src = filename;
}
//-->
</script>
</head>
<body>
<img name="mainimage" src="/land_sales/upload_pics/pic_1.jpg" border="1"><br />
<a href="javascript:changeImage(0,'pic_1.gif')">go</a><br /><br />

<img name="mainimage" src="/land_sales/upload_pics/pic_2.jpg" border="1"><br />
<a href="javascript:changeImage(0,'pic_2.gif')">go</a><br /><br />

<img name="mainimage" src="/land_sales/upload_pics/pic_3.jpg" border="1"><br />
<a href="javascript:changeImage(0,'pic_3.gif')">go</a><br /><br />

note that all the "large" image tags have the same name. That means that the dom object document.form.mainimage is now an array and not an object. THe array is index from 0, 0 being the first oen on the page.

The function now accetpts 2 parameters, the first being the key that that element is against with the mainimage array. eg mainimage[0].src is the src of the first img tag with a name of mainimage

sks1024

No. I don't want them to have the same name. The first image in my example is the large image that is dispalyed by default. This has the name=mainimage

This is the image that changes large to whatever thumbnail is clicked.

These images below are the thumbnails

Here is the page I am working on
http://www.timberlandsunlimited.com/land_sales

Weedpacket

So what names do you want them to have, and why can't you just have PHP write those names for them?

<script type="text/javascript" language="Javascript">
function changeImage(main, thumb)
{
   document.getElementById(main).src = "/land_sales/upload_pics/"+thumb;
}
</script>
<img id="mainimage<?php echo $someuniquenumber?>" src="/land_sales/upload_pics/<?php echo $pic_1?>" border="1" />
<img src="/land_sales_upload_pics/<?php echo $pic_1?>" border="0" onclick="changeImage('mainimage<?php echo $someuniquenumber?>', '<?php echo $pic_1?>');">

Don't cut-and-paste that. It's almost certainly broken because I just typed into this text box on the fly without thinking too hard about exactly what I was typing.

sks1024

Well Weedpacket, it worked great with a little tweaking. The javascript function needed to have mainimage instead of main.

Thanks for the help.

Stan