Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2003
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Button to switch

    Hi,
    I have to images A and B
    Onclick of a button, A and B would change places,
    OnClick of the button again, they would return to their original position.
    How do I do that?

    Lincoln

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Code:
    function switchImage(img1, img2){
       var objImg1 = document.images[img1];
       var objImg2 = document.images[img2];
       var temp = objImg1.src;
       objImg1.src = objImg2.src;
       objImg2.src = temp;
    }
    ...
    <img name="imgA" src="a.gif" />
    <img name="imgB" src="b.gif" />
    <input type="button" value="Switch" onclick="switchImage('imgA','imgB')" />

  • #3
    New to the CF scene
    Join Date
    Dec 2003
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am sorry but can you explain this code?

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    switchImage function accepts 2 parameters, the name of the 2 images to swap (imgA and imgB in this case)
    Code:
    function switchImage(img1, img2){
       var objImg1 = document.images[img1]; //get handle of first image
       var objImg2 = document.images[img2]; //get handle of second image
       var temp = objImg1.src; //store src of first image to a temporary variable
       objImg1.src = objImg2.src; //swap image 2 to image 1
       objImg2.src = temp;  //swap temp (which is previously image 1) to image 2 
    }

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    document.images is a collection of all images in the document, the index can take both names of elements and number indexing, so he takes the 2 names og the img element and creates 2 variables 2 each element, then he create a 3rd variable to hold the temporary source of one of the element then he sets this elements source to the other elements source, then he sets the other elements source to the temporary holds source.


    A bit of a simple image: if you hold a football in each hand and wanna swap them you need to put one of the balls down so you get 1 hand free to take the ball of the other then the free hand can pick up the ball you put down.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by Garadon
    A bit of a simple image: if you hold a football in each hand and wanna swap them you need to put one of the balls down so you get 1 hand free to take the ball of the other then the free hand can pick up the ball you put down.
    You don't have to be a juggler to easily swap the balls without putting one ball down.

    j/k

  • #7
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    think you meant only not don't

    but I never seen a jugler jugling footballs.

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by Garadon
    think you meant only not don't

    but I never seen a jugler jugling footballs.
    I really meant "don't" as anybody can do it himself (maybe with several tries).

  • #9
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    damnit perhaps we should make a coding forum competion in jugling three or more footballs.

    Short CFCJTMF


  •  

    Posting Permissions

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