Code for Randomly changing an image on a website

Discussion in 'Web Design and Development' started by jdl8422, Mar 5, 2008.

  1. jdl8422 macrumors 6502


    Jul 5, 2006
    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
  2. thejadedmonkey macrumors 604


    May 28, 2005
    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.
  3. angelwatt Moderator emeritus


    Aug 16, 2005
    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
    Given this HTML exist
    <img id="theImg" src="image.jpg" alt="logo" />
    See this site for some code for doing image transitions.
  4. mason.kramer macrumors 6502


    Apr 16, 2007
    Watertown, MA
    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
  5. mason.kramer macrumors 6502


    Apr 16, 2007
    Watertown, MA

    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.

Share This Page