This document explores the concept of cycling through a folder of generically named image files (image01.jpg, image02.jpg, image3.jpg. All of which fit a specific size (in this case 800x274 but the size can be anything). Although using flash may have made short work of this concept, it was a proposed that using divisions, css and a little javascript could allow this technique to be used without having to integrate flash into the navigation of the site. This concept was researched and developed for the header of a page, and was intended to have navigation in the blue wave area. Unless a site is all or mostly flash it is best to not use flash for site navigation purposes in the slight case of someone not having the correct flash player, and thus being unable to navigate the site.
To create this look, 2 divisions were created, equal size to each other. The topmost division contains a transparent PNG file with the wave graphic inside of it. The second division has the first of the cycling images placed into it. Using individual ID's for each Division and CSS for each ID, the divisions were placed on top of each other throught the Position Absolute Attribute and the top, left attributes as well. The same height and width as the images were applied to the divisions as well. To ensure proper layering of the divisions, the Positioning Attribute of z-index was used. The foremost layer has an index of 1, the rearmost of 0. The greater the number the more foreward the division will appear (negative and much larger numbers could be used i.e. 9999 and -9999).
Now to make the images cycle. My concept is to use a tad of javascript to look for and display a series of images from a specific folder. Ideally the script will keep loading images until it cant find one with a higher number, and then start back at 1. Since all the images are named image0#.jpg all I need to do is add script to increace the # by one each time a new image is loaded. I also have to figure out how to make it load new images. A few ideas come to mind, I know there is a refresh meta-tag that will force a webpage to reload after a specific period of time, maybe it can be used to force a reload and have a random number generator add the #. There are also javascript behaviours that will allow images to swap when the mouse interacts with them, maybe they have other means to trigger them then just the mouse. I also know about a visibility feature for any absolutely positioned division. Maybe I could stack all the images each in their own division and somehow set each one to become visible on some kind of timer. To start the adventure I'm going to play around with the behaviours in Dreamweaver and then I'll try searching in google. I'll let you know what I find out.