An Example Image Gallery with Chrys`s Approach to ACP
This is the seventh part of my series "Active Client Pages, Chrys’s Approach." In this part of the series, we look at how the Document Phase can help us with images. You need good knowledge of HTML, JavaScript and Perl in order to understand this part of the series.
The file has the HEAD element of the third page. The HEAD element has a short JavaScript. If it were long, then it could be put below the visible elements of the page, so that it would be rendered after the visible elements have been rendered.
Let us talk about what is in the BODY element for the third page first. You have text that indicates that you are on the third page. This is followed by the line break element. Next you have a one-cell table. The dimensions of this cell have been given (so that it should not collapse when there is no image in it). There are three image tags in this cell, as we saw above. At any time, only one of the images can have the value of "block" for the display property.
Below the table tag ID is a button tag. When this button is clicked, the next picture will be displayed. All the pictures are of the same dimensions. As we said before, the pictures are displayed, one at a time. They are displayed one at a time in the one cell of the table. Each time the button is clicked, the nextPicture() function is called.
JavaScript 
Active Client Pages: Simple Document Phase Example Continued
