Looping head images on refresh

  • Hey,

    I’m working on a project for a client and she has requested a header image that changes every time you refresh. I haven’t done anything like that before, but I know it’s possible. MTV at https://www.mtv.com has that feature, not with the header but with the background image of the website. Everytime you refresh a new background loads. So I guess it’s like a loop where you have a certain amount of images in the loop and it changes randomly what to display. Does anyone know how to do this? Any help would be highly appreciated! Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)

  • Here is a very simple script that may give you some ideas:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta content="mshtml 6.00.2800.1264" name="generator" />
<title>Random images</title>

<style type="text/css">
/*<![CDATA[*/

body {
background:#dddddd;
}
div#container {
width:336px;
position:absolute;
top:100px;
left:50%;
margin-left:-168px;
}
img#random {
width:324px;
height:200px;
border:double 6px #000000;
}

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

var images=new Array();
images[0]="image_1.jpg";
images[1]="image_2.jpg";
images[2]="image_3.jpg";
images[3]="image_4.jpg";
images[4]="image_5.jpg";
images[5]="image_6.jpg";

function randomimage() {
var i=Math.floor(Math.random()*images.length);
document.getElementById("random").src=images[i];

}
onload=randomimage;

//]]>
</script>

</head>
<body >

<div id="container">
<img id="random" src="" alt=""/>
</div>

</body>
</html>

    Feel free to begin a chat with me if you need more help:

    skype: motivatebusiness
    yahoo: motivatebusiness

    Thread Starter newcode-media

    (@newcode-media)

    Hey,

    Thanks a lot! Really appreciate the help! The script worked perfectly:) Have a nice day!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Looping head images on refresh’ is closed to new replies.

Tags