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 7 of 7
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts

    image click change problem

    Dear Forum,

    I want to make some images change 3 times when they are clicked on... i.e. from 1.png to 2.png to 3.png and then back to 1.png.

    I require more than one image to do this on the same page, so I have put the images in separate folders... i.e. folder_0, folder_1 etc.

    Thus folder_0 will contain the three images to "play" in sequence when the first image is clicked upon; and folder_1 will contain the three images to "play" in sequence when the second image is clicked on.

    Here is the code I am presently using:

    *******************************

    <html>
    <head>
    <SCRIPT language="JavaScript1.1">
    var folder=new Array() , max=new Array() , index=0 , number=1;
    function changeImage(index){
    number++;
    if(number>max[index])
    number=1;
    document.images[document.images.length-1].src=folder[index]+"/"+number+".png";
    }

    function setData(){
    folder[0]="folder_0";
    folder[1]="folder_1";
    max[0]=3;
    max[1]=3;
    }
    // End -->
    </SCRIPT>
    </head>

    <body onLoad="setData();">
    <center>
    <a onClick="changeImage(0);">
    <img src="folder_0/1.png" width="300" height="200"></a>
    <a onClick="changeImage(1);">
    <img src="folder_1/1.png" width="300" height="200"></a>
    </center>
    </body>
    </html>

    **************************

    It kind of works but clicking on the first image makes the second image change instead of itself.

    Clicking on the second image works OK.

    How do I make the first image change itself only as planned?

    Many thanks for your help.

    Terry

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It kind of works but clicking on the first image makes the second image change instead of itself.
    Clicking on the second image works OK.
    How do I make the first image change itself only as planned?


    Do you want to change the image that is clicked on, or the other image? I can't quite tell from your description.

    This will change the image that is clicked on:








    <script>
    <!--

    myImg = new Array("image1.gif","image2.gif")
    imgNum=0;
    imgCt=myImg.length;
    function swapImg(){
    if(document.images){
    if(document.swap.complete){
    imgNum++;
    if(imgNum==imgCt){
    imgNum=0;
    }
    }
    }
    document.swap.src=myImg[imgNum];
    }

    //-->
    </script>

    <a href="javascript:swapImg();" onFocus="javascript:this.blur();">
    <img name="swap" src="image1.gif" width="150" height="150" border=0 /></a>



    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    Hi James,

    Thanks.

    Your code is smarter than mine and works well.

    Yes, it's the image itself which must change when clicked on.

    So how can I have more than one instance of this going on on a page?

    Like two or three square images that change to other images - bit like a fruit slot machine.

    I tried your code with more than one image and nothing happens, but it works well with one image only.

    Thanks,

    Terry

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's another way using regular expressions....

    Code:
    <script type="text/javascript">
      function changeImage(image){
        var oldNumber = image.src.match(/(\d)(?=\.)/);
        var newNumber = RegExp.$1*1+1;
        if(newNumber > 3){ newNumber = 1 };
        image.src = image.src.replace(/(\d)(?=\.)/,newNumber);
      }
    </script>
    </head>
    
    <body>
    <img src="folder_0/1.png" width="300" height="200"
    style="cursor:pointer" onclick="changeImage(this)">
    <img src="folder_1/1.png" width="300" height="200"
    style="cursor:pointer" onclick="changeImage(this)">
    .....Willy

    Edit: BTW, I do not really understand all the extra work in making seperate folders when the same thing can easily be done using one folder and commonly named but sequentially numbered images.

    IE:
    firstImage1.png; firstImage2.png; FirstImage3.png
    secondImage1.png; secondImage2.png; secondImage3.png
    ect....
    Last edited by Willy Duitt; 07-14-2004 at 04:17 AM.

  • #5
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    Thanks Willy,

    It looks like a neat solution but I can't get it to show all three images. My mistake no doubt.

    Here is your code again having dispensed with the folders idea and with just three images 1.png, 2.png, and 3.png - trying to rotate.

    ********************************<html>
    <head>
    <script type="text/javascript">
    function changeImage(image){
    var oldNumber = image.src.match(/(\d)(?=\.)/);
    var newNumber = RegExp.$1*1+1;
    if(newNumber > 3){ newNumber = 1 };
    image.src = image.src.replace(/(\d)(?=\.)/,newNumber);
    }
    </script>
    </head>

    <body>
    <img src="1.png" width="300" height="200"
    style="cursorointer" onclick="changeImage(this)">
    </body>
    </html>

    **********************

    It shows 1.png, then rotates, but doesn't show images 2.png and 3.png. Comes back to 1.png.

    What could I be doing wrong? Not engaging brain obviously.

    Terry

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmm;

    I don't know what to tell you....
    Since I do not have the images to test with I added a onmouseover event handler to show the image source in the status bar and this indicates that the images are changing....

    Code:
    <head>
    <script type="text/javascript">
      function changeImage(image){
        var oldNumber = image.src.match(/(\d)(?=\.)/);
        var newNumber = RegExp.$1*1+1;
        if(newNumber > 3){ newNumber = 1 };
        image.src = image.src.replace(/(\d)(?=\.)/,newNumber);
      }
    </script>
    </head>
    
    <body>
    <img src="1.png" width="300" height="200"
    style="cursor:pointer" onclick="changeImage(this)"
    onmouseover="status=this.src;return true" onmouseout="status='';return true">
    If you can put a test page online and provide a link it would be easier to debug and find where the problem is, but at the moment I am inclined to believe that the images may not be where you think they are...

    .....Willy

  • #7
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    It's very strange.

    The code works fine if placed in a file in another folder (referencing image files in the same folder), but in the particular folder I was working on, it wouldn't find two of the files - annd they are all there in the same folder.

    Sometimes you just want to give up!

    Now it works in the folder I am in only IF I reference the image files in a different folder - i.e. <img src="../../img/1.png" width="300" height="216"
    style="cursorointer" onclick="changeImage(this)"

    Bizarre.

    Anyway, that works, so thank you so much for your time.

    Best,

    Terry


  •  

    Posting Permissions

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