SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Simple JS...

Hybrid View

  1. #1
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple JS...

    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?

  2. #2
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <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>
    Saul

  3. #3
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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
    Saul

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Could also do this:
    Code Javascript:
    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.

  6. #6
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.
    Saul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •