Home/ Questions/Q 9277921
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T17:13:52+00:00

Simple request, but I don’t know how to do it. I’ve got a series

  • 0

Simple request, but I don’t know how to do it. I’ve got a series of 10 images (image0.gif, image1.gif image2.gif etc…) that need to change to the next image in the sequence (cycling around after 9) when another image is pressed. This is what I have so far…

 <html>  
    <head></head>
    <body bgcolor="#808080">
        <script type="text/javascript">
            var c = 0;
            function preload(img) {
                var a = new Image();
                a.src = img;
                return a;
            }

            if (needed) {
                time0 = preload("image0.gif");
                time1 = preload("image1.gif");
                time2 = preload("image2.gif");
                time3 = preload("image3.gif");
                time4 = preload("image4.gif");
                time5 = preload("image5.gif");
                time6 = preload("image6.gif");
                time7 = preload("image7.gif");
                time8 = preload("image8.gif");
                time9 = preload("image9.gif");
            }

            function clickme() {
                // update image
                c += 1;
                // alert(c)
            }
        </script>
        <div align="center">
            <center>
                <img src="images/image0.gif" width="20" height="55" name="time0"> <a href="#" onMouseDown="return clickme()">
                    <img src="images/button.gif" border="0" width="96" height="55">
                    </a>
                </td>
                </tr>
                </table>
            </center>
        </div>
    </body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, you can and should take advantage of the fact, that only thing diferrent in the each umage name is number. So, you can store number and create any image name: 

    function getImage(id) {
    return "image"+id+".gif";
}

    Then, you should have a way to acces the image that you want to change. Like adding id to he element:

    <img id="changing" src="image0.png" />

    There should be onclick used, not onmousedown. User may change his mind and hower the mouse away – that is not click:

    <a href="#" onclick="clickme()" />

    Finally, changing the image element:

    var c=0;
var max = 9;
function clickme() {
   c++;
   if(c>max)
     c=0;   //looping back to zero
   docment.getElementById("changing").src = getImage(c);  //getImage is defined above
 }
    • 0