jump to navigation

Ahhh, Springtime… May 19, 2011

Posted by flutebrarian in Web Design.
Tags: , , ,
add a comment

Ahhh, Springtime. A time when a girl’s thoughts turn to … golf!

I was recently contacted to create a website for a regional women’s golf club. Since I’m not one who has ever hit a golf ball beyond the mini-putt course, I went into student mode and learned all about handicaps, team play, and standing rules.

But even though I know very little about the game, I enjoy the beauty of the lush grass courses on which the game is played. How about rotating pictures of the various clubs in the league? They liked the idea.

I was thinking in terms of a small rotating gallery done with a JavaScript file I had used several times before. No, they’d rather have a full header for the page fading in and out of the various clubs.

Time to search for a new script.

At first I found a php script that randomly changed the background image every time the page was refreshed or reloaded. This was a snap to put in place – download php, create image directory, put all images and php in this directory, point the CSS file to the script and you’re done. You can add and delete images without having to alter any code in the script, CSS, or HTML.

But it didn’t fade in and out. So back to the drawing board and this time a new JavaScript.

This time, I found an image cross fader from slayeroffice.com. Although it wasn’t as straightforward as the php script, it was much more robust and the images fade in and out quite nicely. And changing the setTimeout value from 1000 to 5000 increased the fading time between images from 1 second to 5 seconds so one doesn’t get dizzy from the changing golf course images.

There are two CSS files and one JavaScript file to download. The images to be used are listed one after another in the HTML file where the fading images are to appear. So, there is more maintenance involved if the images are added or deleted.

But the client likes it, and that’s what counts.