Scripting the Duval Rollover Template

When you mouseover one of 8 thumbnails, the main image is swapped with a larger version of the thumbnail using Javascript that's freely available or generated by Dreamweaver.

Shown above is one of 17 pages that uses exactly the same HTML, Javascript and CSS. The first page served as a template for the remaining pages. What makes each page unique is in the first 8 lines of PHP code and an array of images which preceeds the HTML. PHP is supplying, not only the images, but the page's title, metatags, page graphics, a CSS property, and the preload string for the onLoad event.

The PHP coding also determines whether or not to show the 'back' or 'next' graphic to display the previous or next group of 8 images. If 'next' or 'back' is clicked, the page reloads with different images.

view the code (opens into new window)