Quick javascript question

[ghost recon88]

Hey all -

I'm trying to figure out how to make a javascript page, or action that will allow me to switch between 2 .gif files when I click either "previous" or "next". So basically, if I click "next", whichever .gif is not currently being displayed will then be displayed. Only one .gif will be displayed at a time.

 

[PhatoseAlpha]

Depends on the details. You can have 2 images on the page, and just alter which of the 2 is hidden, or you can change the src of one image to alternate between the two.

 

[ghost recon88]

Depends on the details. You can have 2 images on the page, and just alter which of the 2 is hidden, or you can change the src of one image to alternate between the two.

I think I want the latter option, where it the source alternates between the 2. Both images would need to be displayed in the same area of the page, so I think I just need to alternate the source.

 

[PhatoseAlpha]

OK, then you'll need to give your image element an id. You could just check the src every time, but you'd probably be better off storing your location in a variable.

<img src='SourceOfImage1.gif' id='TheImage'>
<a href='javascript:Next();'>Next</a>
<a href='javascript:Previous();'>Previous</a>
<script>

var TheElement = document.getElementById("TheImage");
var CurrentImage = 0;
var Images = [];
Images.push("SourceOfImage1.gif");
Images.push("SourceOfImage2.gif");
Images.push("SourceOfImage3.gif");

function Next()
{
CurrentImage += 1;
if (CurrentImage >= Images.length) {CurrentImage = 0;}
UpdateImage();
}

function Previous()
{
CurrentImage -= 1;
if (CurrentImage < 0){CurrentImage = Images.length-1;}
UpdateImage();
}

function UpdateImage()
{
TheElement.src = Images[CurrentImage];
}

</script>