Question

im trying to use html and javascript to create a rotating logo on my site.

I want it to rotate on page load, and load them randomly.

Ive tried SO MANY THINGS! that i found on google, and i cant seem to get it to work. Im trying to avoid using php to do it.

i want to be able to have the random image in a tag like below, (if possible)

<img src="" />

So, just to sum it up.

I want to use “html” and “javascript” to create a script that everytime a page is refreshed, it loads a new logo from a directory on my server.

EDIT: what i have tried

<script type="javascript>
    Array.prototype.random = function () { 
        return this[ parseInt( Math.random() * this.length )  ];
    }

    var myImage=[ 
        "logo1.png",
        "logo1.png",
        "logo1.png",
        "logo1.png"
    ].random()

    document.wite(myImage)
</script>

Answer 1

You should avoid using document.write. Instead put an id attribute on the img tag, and retrieve it using document.getElementById. You can make it refresh at intervals using the setInterval method:

<img id="logo" />
<script type="text/javascript">
var logos = ["logo1.png", "logo2.png", "logo3.png"];
var currentLogoIndex = 0;
function updateLogo() {
    document.getElementById('logo').src = logos[currentLogoIndex];
    currentLogoIndex++;
    currentLogoIndex %= logos.length;
}
window.setInterval(updateLogo, 1000);
updateLogo();
</script>