Question

I’m trying to find a way to load different content (basically <img> and <a>) within divs, on every page load.

I know it is possible to do, since many sites use “dynamic” or “rotating” banners which either load different content on a defined interval or on page load.

Many thanks for any help 🙂

Answer 1

I would do this by making an array of objects containing the URLs of the image and the link, then using Math.random() to select a random one.

var banners = [
    { img: '/images/1.png', a: 'page1.htm'},
    { img: '/images/2.png', a: 'page2.htm'},
    { img: '/images/3.png', a: 'page3.htm'},
    { img: '/images/4.png', a: 'page4.htm'},
    { img: '/images/5.png', a: 'page5.htm'},
    { img: '/images/6.png', a: 'page6.htm'}
];
var banner = banners[Math.floor(Math.random() * banners.length)];
document.write('<a href="' + banner.a + '"><img src="' + banner.img + '"></a>');

You might well want something more complex than this, but this should give you a starting point.