When we declare the div in the style tag we include the visibility option.
#div1 {position:absolute; top: 30; left: 20;visibility:visible}
#div2 {position:absolute; top: 30; left: 20;visibility:hidden}
We have also included a placement() function that places and hides the divs. An onLoad="placement()" initiates it. This allows older classics to view it properly while not affecting newer units.
as you click from one to the other, the current one becomes invisible while revealing the next one.
This is done in the link.
<a onclick="document.all.div1.style.visibility='hidden';document.all.div2.style.visibility='visible'"> next</a>
Though difficult to see, there is a semicolon ; in that link. That seperates the actions and allows more than one action to be initiated with a single click.
The rewind button initiates a function within the script called show4. The code within that function and the ones that follow are identical to the code within the links.
The setTimeout delays the change for 1 second.
<a onClick="show4()">rewind </a>
It is a simple thing to do but it can create dramatic results