[SOLVED] onClick Image change link issues

[emma57573]

Hi, im new to this forum and quite novice 

 

Basically I have 5 images one is a 350 x 350px main image and the rest are thumnails they are all called from a mysql table

 

I have a script that swaps the thumbnail images with the 350px image and its working great but there is one problem that I cant get my head around.

 

Although it swaps the images the link on the main image stays the same!

 

The 350 x 350px is linked so that when you click on it, it shows the full size image in a new window.

The trouble Im having is that the link always brings up the first image in the array no matter what image is showing.

 

Can anyone shed some light, It seems like a really simple fix but I can figure it out.

 

 

JavaScript Function for swaping images - works great

<script language="javascript" >
function imageSwap(imgElem, newSrc) {
document.getElementById(imgElem).src = newSrc;
} 

 

 

 

PHP Function and images.

 

	$freetplq_img="select * from freetplclassified_images where  pid=".$rst["id"];

//	die($freetplq_img);
	$freetplrs_img=mysql_query($freetplq_img);
                        
	if(mysql_num_rows($freetplrs_img)>0)
	{
		$freetplcnt=0;
		$freetplimg_per_row=5;

		while($freetplrow_img=mysql_fetch_array($freetplrs_img))
		{

			if($freetplcnt%$freetplimg_per_row == 0) 
			{ ?>

			  <td height="100%">
			  <table width="100%" height="100%" border="0" cellpadding="5" cellspacing="5">
                      <tr> 
                        <td width="51%" valign="top"><table border="0" cellspacing="5" cellpadding="5" class="onepxtable">
                            <tr>
                              <td align="left">
						  
						  
						  <a href="uploadedimages/<?php echo $freetplrow_img["url"]; ?>" onclick="window.open(this.href); return false;">

						  <img name="onclick" id="swap_id" src="<?php echo $img_path.$freetplrow_img["url"]; ?>" border="0" width="350" height="350"></a></td>
                            </tr>
                        </table>  
				    </td>    
					<td height="100%" align="left" valign="top">      <table width="100%" height="100%" border="0" cellpadding="5" cellspacing="0">           
                       
				   
				   
            <?php 
			}	//end if 
			$freetplcnt++;


			?>

			  <tr>

				  <td align="left">
						  
						  
		                   <a href="uploadedimages/<?php echo $freetplrow_img["url"]; ?>" rel="swap_id"  onclick="imageSwap(this.rel, this.href); return false;">
						  <img src="<?php echo $img_path.$freetplrow_img["url"]; ?>" border="0" width="75" height="75" ></a></td>
                            </tr>
                         
                  <?php if($freetplcnt%$freetplimg_per_row == 0) 
			{ ?>
                 </table>  

 

 

[emma57573]

If it helps at all heres the link to the page:

 

http://www.misi.me.uk/product_desc.php?id=136

 

 

[fanfavorite]

Your problem is that you are trying to update the href field through PHP, which is server side.  Server side means that it gets updated before any input from the visitor to the website.  That means that anything the user does, will not update unless the page is refreshed. 

 

You should be able to add to your imageSwap:

 

document.getElementById("bigimage").href;

 

and add an id to your href tag:

 

<a id="bigimage" href="uploadedimages/<?php echo $freetplrow_img["url"]; ?>" onclick="window.open(this.href); return false;">

 

Just a side note, you should fix your other error on the page:

 

 

function openpopup(pg) {

  window.open(pg,"win","top=5,left=30,toolbars=no,maximize=yes,resize=yes,width=430,height=420,location=no,directories=no,scrollbars=yes");

return

} //ADD CLOSING FOR FUNCTION

</script>

[fanfavorite]

oops should be document.getElementById("bigimage").href = newSrc

[emma57573]

Thank you very much, you have been most helpful! 

I will no doubt be on here again for assistance, not sure I will be of much help to anyone else though  :-\