Simple JS...

[iTechno]

Hey guys,

I have no idea about Javascript but I know this is probably achieved most easily with JS. Anyway heres what I need:

I have an image on the left hand side and on the right I have some smaller images, when a person clicks one of the smaller images on the right, I want to make it so that the image on the left hand side changes.

Any ideas guys?

[php_daemon]

<div id="left">
  <img id="left_image" src="image.jpg" />
</div>
<div id="right">
  <img src="image1.jpg" class="small_image"/>
  <img src="image2.gif" class="small_image"/>
  <img src="image3.jpg" class="small_image"/>
</div>
<script type="text/javascript">
  for(i=0; i<document.images.length; i++){
    if(document.images[i].className=='small_image'){
        document.images[i].onclick=function(){
           document.getElementById('left_image').src=this.src;
        }
    }
  }
</script>

[iTechno]

Thanks a lot for the response.

I'm not exactly really good at JS as I stated so this question may be stupid but...

I want it to change to a different image for each image. For instance if image1 is clicked I want image1large, if image2 is clicked I want image2large etc....

Does this script enable this to happen?

[php_daemon]

Several ways to do that. One of them would be adding a name for each image that would also be the name of large image; then you could simply use this.name instead of this.src

[Raffles]

Could also do this:

var imgs = document.getElementById('right').getElementsByTagName('img');
var leftimg = document.getElementById('left_image');
for(var i=0,; i<imgs.length; i++){
  imgs[i].onclick=function(){
    var bits = this.src.split('.');
    var ext = bits.pop();
    leftimg.src = bits.join('.') + 'large.' + ext;
  }
}

No need for class or name attributes for the images. But you have to name your images exactly according to the pattern.

Edit:

Allows for filenames with dots now.

[php_daemon]

Yep. Just in case the filename has periods, you should use the last bit for the extension and concatenate the rest of the bits for the filename.