Code for Randomly changing an image on a website

[jdl8422]

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

[thejadedmonkey]

It's pretty simple in flash... (haven't played around in flash in years though, don't recall how to)

you could use javascript.. for added fun, use AJAX!

or just make it an animated GIF.

[angelwatt]

It can be done with either JavaScript or Flash. Here's one way to do it with JavaScript, though no fade in/out.

<style type="text/javascript">
var images = new Array('image1.jpg', 'image2.jpg', 'etc');
function ChangeLogo()
{
  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
</script>

Given this HTML exist
[HTML]<img id="theImg" src="image.jpg" alt="logo" />[/HTML]

See this site for some code for doing image transitions.

[mason.kramer]

AFAIK, it can't be done in HTML/CSS. Your options are basically javascript or flash. The javascript way would be to install a javascript framework like jQuery or Scriptaculous or Mootools (and oy! don't ask which is best, what a can of worms that is! I use scriptaculous because that is integrated with my framework.)

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.

Alternatively, you might be able to find a standalone javascript that does what you're looking for, probably as part of a larger javascript app that does what's lightbox effects, which is a fancy way of saying a js that displays pictures prettily.

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

[mason.kramer]

Oo! Here's an idea. Try this lightbox program and make it a timed slideshow. Y

The docs are good and you can probably hack your way through it without knowing any javascript.

I've used this light box, I liked it.