www.webdeveloper.com
Results 1 to 4 of 4

Thread: Rotating Images?

  1. #1
    Join Date
    Mar 2014
    Posts
    2

    Rotating Images?

    Hi there!
    I don't know a lot about code beyond markup languages, so I need some help. I'm trying to have something on my footer that changes to a random image with each page load. I've got it positioned where I want it, but I can't get it to do what I want.

    I've tried googling what I could, and this had the closest result that I wanted. This code has the images rotating by seconds, and in order - http://www.htmlgoodies.com/beyond/ja...r-Web-Site.htm

    Any help with how I should modify that code ((or if there's something different that I should do entirely)) would be greatly appreciated!

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    899
    Because you want to load a random image on each page load, your code will not need to be as complicated as the example you provided. But I suppose one question would be how do you want to handle the 'randomness' of these rotating images? Because you could go with a purely random method, loading 1 image on each page load, chosen at random with no regard to previous images loaded. Or perhaps you don't want an image to repeat twice in a row, or only show up once every 3 loads.

    In either case, you'll start off with something like so:
    Code:
    var $images = ['/location/of/images/image1.jpg',
    '/location/of/images/image1.jpg',
    '/location/of/images/image1.jpg',
    '/location/of/images/image1.jpg',
    '/location/of/images/image1.jpg'];
    var $rnd = Math.round(Math.random()*($images.length-1));
    document.write('<img src="'+$images[$rnd]+'" alt="" />');
    But that is just the simplest version. When the page loads it will randomly load any of the images in the $images array. You could make other changes such as use cookies or pass arguments through the url if you wanted to keep up with which images have loaded and prevent the same image from loading twice in a row, etc.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Mar 2014
    Posts
    2
    @Sup3rkirby
    Thanks for the help! I'm afraid I'm a little lost though.. So I'm scrapping all of the code from what I linked to, right? Where would I put the code that you linked to (in the header)? What would I use to get this into the spot where I want, the footer?
    I don't need anything too fancy. Something purely random (even if the previous page load displayed it) would be perfect.

    Ahah I've definitely got a more developed artistic side of my brain rather than my mathematics side, so this takes a bit for me to understand. Thanks again for taking the time to help me!

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    899
    Well, if you want to keep this as simple as possible, you will stick the code I provided inside of <script> tags and place this wherever you want the image to appear on the page.

    Granted, I could easily modify it to place the image on the page for you, but you would need to set the 'id' attribute of your page's footer and let me know what it is.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles