[SOLVED] Dyamic Table Display for Picture presentation

[Grodo]

Hello Everyone,

 

    At las, another PHP issue (its just like the black plague).  I am trying to practice good web coding technique and stay away from the dread iframes. (Just like the bogey monster under your bed when you were 5, but hidden in cyberspace =/ ) So here is an overview of what i am trying to do.  Values are sent to the Picture Window using a function.  Corresponding values trigger images to show up in the Picture Window dynamically.  When the user clicks on pic3 the value is sent to the Picture window; this displays a larger image of "pic 3" is shown in the Picture Window.  The variable passed corresponds to the images the user clicked on.  For example the user click on pic3 a value of pic3-large.jpg is sent to the getPicture function which displays a larger image in that window.  General layout of the function is written below.  The question that I have is how can I capture the user clicks to send a value to the function getPicture($image)?  My next question is how can I get pic3-large.jpg to show up in the pic3 table, while keeping all other parts static? The table id for the picture viewer is picture_view.  I could use an iframe but I rather do this in PHP.  Since the support for iframes is rather buggy; and really isn’t a cross browser solution.  Here is a picture to better explain what im trying to do and below it is some code.

 

Always Thanks,

Grodo

 

 

// Function to receive the string x and display the corresponding image
Function getPicture($image) {
// Echos html code that will set the image
Echo ‘<img src=”somedirecotry/” + $image>’
}


//Html table code for pic3
<table id="Table_01" width="791"  border="0" cellpadding="0" cellspacing="0" bgcolor="#cc9999" style="padding-left: 7;">
  <tr>
  	
      <td colspan="5" id="picture_view">This is the picture viewer!</td>
</tr>
</table>

[GingerRobot]

This is a job for javascript not php. You'll need to create a javascript function to modify the source of the large image, which is run when a picture is clicked. You'll pass the name of the image to load to the function.

[Grodo]

Ok, Thank You

 

 

By chance you wouldn't know anywhere where I can get any additional help?

[cooldude832]

did you think of the javascritpt boards?

[GingerRobot]

Well, the javascript function will be something like:

 

<script type="text/javascript">
function changeimage(image){
document.getElementById('largeimage').src='path/to/images/'+image;
}
</script>

 

It'll then be a case of giving your large image the ID of 'large image', and adding this piece of code into your image tags:

 

onClick="changeimage('imagetoload.jpg')"

 

[Grodo]

Thank You for all your help ginger robot! I found what i needed it can be found here: http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm