CODEWITHSUNDEEP
javascript
Ghoul Fool
Ghoul Fool

Reputation: 6967

Javascript to image cycle

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>

Upvotes: 0

Views: 117

Answers (2)

Tom&#225;š Zato
Tom&#225;š Zato

Reputation: 53358

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
 }

Upvotes: 2

Explosion Pills
Explosion Pills

Reputation: 191829

Put an id on the image (the-image, for instance).

function clicme() {
    c += 1;
    document.getElementById('the-image')
        .setAttribute('src', 'image' + (c % 10) + '.gif');
}

Also there is no href element. I think you meant to type <a href.

Upvotes: 1

Related Questions