Load image same page no popup

1

hello everyone,

i don’t know how to go about implementing this… here’s the code for a 5x1 table:

<table width="27%" border="1" cellspacing="0" cellpadding="1">
  <tr> 
	<td>Thumbnail 1</td>
  </tr>
  <tr> 
	<td>Thumbnail 2</td>
  </tr>
  <tr> 
	<td>Thumbnail 3</td>
  </tr>
  <tr> 
	<td>Thumbnail4</td>
  </tr>
  <tr> 
	<td>Loaded Thumbnail Goes here</td>
  </tr>
</table>

I have 4 links, each is a thumbnail and when clicked, will load the enlarged image. But I would like it to be loaded in the current page, in the current cell with the text “Loaded Thumbnail Goes Here”.

There are about 20 tables of this type on one page.

thanks!
-chris

2

Sorry but I can’t think of a way of doing this in HTML. :frowning: An ‘a href’ tag only has certain options like _parent, _new, _blank - certainly nothing that supports what you’re trying to achieve.

If you’re not wanting to do it in Flash then I’d experiment with javascript. Here’s a link to what I think you’re trying to do… http://www.cryer.co.uk/resources/javascript/script13_gallery.htm#_self

Good luck :thumb:

3

hey thanks for the reply and website. you gave me a good idea on how to do it

chris

4

You could try a bit of javascript to preload the images, or load them upon request. Here’s a little bit of code, but I haven’t tested it… just a thought, but I’m pretty sure it can be done.

This code may not work properly… I’m not much of a javascripter.

It’ll load the full pic, but you’ll probably want to look into preloading as people probably won’t want to wait for it to load in the background. They don’t really get anything visual to indicate that the picture is actually loading.


<!-- Javascript function to load an image-->
<script language="javascript">
function loadNewImage (imgsrc)
{
// load image
image = new image();
image.src = imgsrc;
document.fullpic.src = image.src;
}
</script>

<table width="27%" border="1" cellspacing="0" cellpadding="1">
  <tr> 
    <td><a href="#" onClick="loadNewImage('fullimage1.gif')">Thumbnail 1</a></td>
  </tr>
  <tr> 
    <td>Thumbnail 2</td>
  </tr>
  <tr> 
    <td>Thumbnail 3</td>
  </tr>
  <tr> 
    <td>Thumbnail4</td>
  </tr>
  <tr> 
    <td><img src="whatever.gif" name="fullpic"></td>
  </tr>
</table>