View Full Version : Code for Randomly changing an image on a website
Mar 5, 2008, 09:01 PM
I am designing a website. There is a picture near the top header by the logo of the company. I want the picture to change out every so often automatically, not a rollover. It would be nice if it would fade in and out. Is this a flash thing? I am designing it using HTML/CSS. I would prefer to use that because I do not know flash. Thanks
Mar 5, 2008, 09:06 PM
It's pretty simple in flash... (haven't played around in flash in years though, don't recall how to)
or just make it an animated GIF.
Mar 5, 2008, 09:14 PM
var images = new Array('image1.jpg', 'image2.jpg', 'etc');
var i = document.getElementById('theImg');
// randomly pick image from array
i.src = images[Math.floor(Math.random()*i.length)];
setTimeout("ChangeLogo()", 8000); // Change logo every 8 seconds
window.onload = ChangeLogo; // Start change once page loaded
Given this HTML exist
<img id="theImg" src="image.jpg" alt="logo" />
See this site for some code for doing image transitions. (http://www.brothercake.com/site/resources/scripts/transitions/)
Mar 5, 2008, 09:22 PM
The JS framework has functions which let you add "effects" to DOM elements (like a an IMG or a DIV containing an image). These effects are achieved by re-styling the CSS of the element many times very quickly, so it looks like a smooth transition, or fade, or color shift, or what have you.
For a picture switcher, you'll have to figure out a way to get all the pictures in the same spot as well. If you don't have a lot of pics, you could load them all into an array. If you do have a large pic library and don't want to the user to have to download them all, you're looking at AJAX requests.
What you're trying to do sounds simple, but it really isn't that simple. So if you're still learning html/css, you should probably put it aside for later.
Unless some clever chap around here knows a better way...
edit: Angelwatt beat me to it
Mar 5, 2008, 09:46 PM
Oo! Here's an idea. Try this (http://smoothgallery.jondesign.net/showcase/timed-image-switcher/) lightbox program and make it a timed slideshow. Y
I've used this light box, I liked it.