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 12 of 12
  1. #1
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts

    multiple images swap and swap back onclick

    Hi. I found this post:

    http://www.codingforums.com/showthre...ick+image+swap

    with this script:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body>
    <script type="text/Javascript">
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    function imageflip (toggleimage) {
    	tab = document.getElementById(toggleimage);
    	if (tab.src.match('One.gif')) {
    	   tab.src=ImgPath+'Two.gif';
    	}
    	else {
    	   tab.src=ImgPath+'One.gif';
    	}
    }
    </script>
    
    <img id="myimage" onclick="imageflip('myimage')" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100">
    </body>
    
    </html>
    and it works great for one image BUT I have multiple images that I would like to have use the same script.

    Any help would be great!!!

    Thanks!
    Last edited by Lisawynn; 11-03-2006 at 08:57 PM.

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    that script will do it for multiple images.

    you just have to call it with each image's id value


    this is the image you are using now:
    <img id="myimage" onclick="imageflip('myimage')" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100">
    the highlighted section is the part that calls the script, but notice that inside the ( )'s is 'myimage' also notice that the id of that image happems to be 'myimage'. this is how the scripts knows what image it is dealing with.
    if you want a universal call method use this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body>
    <script type="text/Javascript">
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    function imageflip (toggleimage) {
    	
    	if (toggleimage.src==ImgPath+toggleimage.id+"1.gif")) {
    	   toggleimage.src=ImgPath+toggleimage.id+"2.gif";
    	}
    	else {
    	   toggleimage.src=ImgPath+toggleimage.id+"1.gif";
    	}
    }
    </script>
    
    <img id="myimage" onclick="imageflip(this)" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100">
    </body>
    
    </html>
    ok to further explain it.....
    make sure that when you create the <img> tag that it has an id set to it, and that the id value is the name of the image file without the number and no file extention.

    i.e.: if the two images you are swapping back and forth between are named cars1.gif and cars2.gif you would do as so:

    <img id=cars src="http://www.vicsjavascripts.org.uk/StdImages/cars1.gif" onclick="imageflip(this);">

    f another img in the window is swapping between two images named dogs1.gif and dogs2.gif you would do as so:

    <img id=dogs src="http://www.vicsjavascripts.org.uk/StdImages/dogs1.gif" onclick="imageflip(this);">


    so you need to asign an id value to the html img tagthat corrisponds to the image files you are swapping it to. you also need to make sure that these files are properly named as such.


    hope this is what you needed. if you need any furher help, just let me know.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey BrandonH!!! Thanks so much for responding to my post. I have tried out what you have suggested and still cannot seem to get it to work. Here is what I have:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script type="text/Javascript">
    var ImgPath='images/collapse';
    function imageflip (toggleimage) {
    	
    	if (toggleimage.src==ImgPath+toggleimage.id+"1.gif") {
    	   toggleimage.src=ImgPath+toggleimage.id+"2.gif";
    	}
    	else {
    	   toggleimage.src=ImgPath+toggleimage.id+"1.gif";
    	}
    }
    </script>
    
    </head>
    
    <body>
    <img id=admin src="images/collapse/admin1.gif" onclick="imageflip(this);">
    </body>
    
    </html>
    I think I understand about giving the image an id which I have done as "admin". The images will still not flip back and forth when you click on the original image. My images are named "admin1.gif" and "admin2.gif". I haven't added any additional images yet because I want to get this to work first. Any other suggestions as to what is happening? I haven't been coding for awhile and I am thinking its like a language - if you don't speak it regularly you sort of lose it and have to start all over again!!!

  • #4
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    give me the exact file path and name of two images that you have on your site that you want to swap back and forth.

    I tried finding your images, but could not....
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #5
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    wow! i'm a dumb dumb yet again, lol.


    i found the problem........

    var ImgPath='images/collapse';

    that needs to be set to the full path name, not the short path name.

    reason is, because when you set an images src (wether with long or short) it will actually set it to the long path. so, when you run the script and it checks to see what the src value is:

    if (toggleimage.src==ImgPath+toggleimage.id+"1.gif")

    if you have ImgPath set to "/images/yourpic.gif"
    and the src value of the image is http://www.yoursite.com/images/yourpic.gif
    , then obviously the two values are not identical..... therefore it will not change. so just set your ImgPath var to the full path , and it should work beautifully.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #6
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey there!!!

    Unfortunately, you won't be able to access them. I am developing for an internal site that is not accessible to the public. The original coding I posted was from another post that I was referencing to get the idea across of what I am trying to accomplish. I have attached the image files for you. Again, I really appreciate you spending time on this. I am saving the images in the following folder on my internal site:

    images/collapse/admin1.gif
    images/collapse/admin2.gif

    The other images I am using are the same idea. For example:

    images/collapse/common1.gif
    images/collapse/common2.gif
    Attached Thumbnails Attached Thumbnails multiple images swap and swap back onclick-admin1.gif   multiple images swap and swap back onclick-admin2.gif  

  • #7
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Sailor!!!

    It is working now. Sorry, I didn't see your second post before I sent my last post.

    Can't thank you enough!! This was driving me crazy!!!

    Take Care!!

  • #8
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    the code above will work, but it will display the images' file path in the status bar everytime the user clicks on it. if you preload the images, that wont happen.

    use this:


    Code:
    if (document.images){
    //for each picture creat a set of
    pics= new Array();
      
    pics[0]= new Image(); 
    pics[0].src="admin1.gif"; 
     
    pics[1]= new Image(); 
    pics[1].src="admin2.jpg"; 
    
    pics[2]= new Image(); 
    pics[2].src="anotherpic1.gif"; 
     
    pics[3]= new Image(); 
    pics[3].src="anotherpic2.jpg";
    
    //and so on......
    }
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #9
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Works great!!! Thank you x10...... What about combining this with a mouseover? For example, mouse hovers over image, image changes but only stays if clicked. When clicked, new image replaces original image. When clicked again, image returns to original image.

  • #10
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    that would be a lengthy script in itself, and it would wind up not giving you the out come you want i think, lol.

    say the first image is loaded. you mouseover it and it changes to the other image. if youdont click on it, the only way to make it change back would be onmouseout. the difficulty there is that if the user does click in the image, when they mouse out, it would change back.


    i do have an idea though, i gatta write it out and see if it works. will post if it does, and if not, will post say it doesnt.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #11
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    well it can be done, and with alot less script then i thought!

    her it is:

    Code:
    <script type=text/javascript>
    var ImgPath='file:///H:/hartmanc/ProfData/Desktop/projects/';
    var mouseO='0';
    function imageflip (toggleimage) {
    	if(mouseO=='0'){
    	if (toggleimage.src==ImgPath+toggleimage.id+"1.jpg"){
    	   toggleimage.src=ImgPath+toggleimage.id+"2.jpg";
    	}
    	else{
    	   toggleimage.src=ImgPath+toggleimage.id+"1.jpg";
    	}}
    }
    </script>
    
    <img id="closeup" onclick="mouseO='1';" onmouseover="imageflip(this)" onmouseout="imageflip(this);mouseO='0';" width="100" height="100"  src="closeup1.jpg" >
    you will have to chage all the images names and file path of course....

    I hope I have been able to help you get done what you needed. enjoy..
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #12
    New Coder
    Join Date
    Feb 2004
    Location
    Manitoba, CANADA
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey brandonH!!! It works perfectly. Thanks again. You have been extremely helpful!!!!! Take Care!!!

    M.


  •  

    Posting Permissions

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