SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    changing part of a src attribute

    Hey guys,

    How can I achieve this.

    Say for example I have a list of thumbnail images. When a user clicks on an image I want to replace it with it's full size equivalent.

    all thumbnails end with "-tn.jpg"
    all full size images end with "-full.jpg"

    This is where I'm stuck at:

    Code JavaScript:
    		if (!document.getElementsByTagName) return false;
    		var images = document.getElementsByTagName("img");




    So far I have every element with the tag "img" stored in the variable images?

    What I want to do is this :

    onclick if the img src attribute contains -tn.jpg replace it with -full.jpg
    else if the img src attribute contains -full.jpg replace it with -tn.jpg

    I don't know how to write it so javascript can understand what I want it to do.

    Any help appreciated !

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here you go:

    Code JavaScript:
    var img = document.getElementsByTagName('img'),l=img.length;
    var tn = '-tn.jpg';
    var full = '-full.jpg';
    while(l--) {
        img[l].onclick = function() {
            if(this.src.substr(this.src.length-tn.length)===tn) {
                this.src = this.src.substr(0,this.src.length-tn.length) + full; 
            } else {
                this.src = this.src.substr(0,this.src.length-full.length) + tn; 
            }
        }
    }
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    Here you go:

    Code JavaScript:
    var img = document.getElementsByTagName('img'),l=img.length;
    var tn = '-tn.jpg';
    var full = '-full.jpg';
    while(l--) {
        img[l].onclick = function() {
            if(this.src.substr(this.src.length-tn.length)===tn) {
                this.src = this.src.substr(0,this.src.length-tn.length) + full; 
            } else {
                this.src = this.src.substr(0,this.src.length-full.length) + tn; 
            }
        }
    }
    It doesn't quite work for me. When I click on the image it'll quickly flash the full sized version and return back to the thumb nail.

    I came up with this

    Code JavaScript:
    function imageresize()
    {
    var imgs = document.getElementsByTagName('img'); 
    for (var i = imgs.length; i--; )
    var img = imgs[i]; img.src = img.src.replace('tn', 'full')
    };

    Triggered by onClick but it does the same thing.

    Ah well, nearly there


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
  •