Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 398
  • Last Modified:

JAVASCRIPT: Needing a Sequential instead of Random Image Replacement Script

The following script swaps the background image randomly when the page is refreshed, how can the script be altered to sequentially cycle thru all the images?


<head>
     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
     <title>Random Pictures</title>
     <style type="text/css" title="text/css" media="all">
<!--
#header
{
     position: absolute;
     margin-top: 100px;
     margin-left: 100px;
     width: 468px;
     height: 60px;
     background-image: url(images/pic1.gif);
}
-->
</style>
<script type="text/javascript" language="javascript">
<!--
function swapPic()
     {
     if(document.getElementById)
                 {
                 var thePicture=document.getElementById("header");
                 var picPath="images/pic"+rnd(4)+".gif";
                 thePicture.style.background="url("+picPath+")";
                 }
     }
     
function rnd(n)
     {
     return Math.floor(Math.random() * n) + 1;
     }
     
//-->
</script>
</head>
<body onload="swapPic()">
<div id="header"></div>
 
</body>
</html>

Open in new window

0
aztecgreen
Asked:
aztecgreen
1 Solution
 
Michel PlungjanIT ExpertCommented:
Like this?
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript">
var img = getCookie('currentImg');
if (img) img = parseInt(img);
else img=0;
img++;
if (img > 5) img = 1;
setCookie('currentImg',img);
function swapPic() {
  if(!document.getElementById) return; 
  var thePicture=document.getElementById("header");
  var picPath="images/pic"+img+".gif";
  thePicture.style.background="url("+picPath+")";
}
 
</script>
 
You need a cookie.js:
 
// cookie.js file
var cookieToday = new Date(); 
var expiryDate = new Date(cookieToday.getTime() + (365 * 86400000)); // a year
 
/* Cookie functions originally by Bill Dortsch */
 
function setCookie (name,value,expires,path,theDomain,secure) { 
   value = escape(value);
   var theCookie = name + "=" + value + 
   ((expires)    ? "; expires=" + expires.toGMTString() : "") + 
   ((path)       ? "; path="    + path   : "") + 
   ((theDomain)  ? "; domain="  + theDomain : "") + 
   ((secure)     ? "; secure"            : ""); 
   document.cookie = theCookie;
} 
 
function getCookie(Name) { 
   var search = Name + "=" 
   if (document.cookie.length > 0) { // if there are any cookies 
      var offset = document.cookie.indexOf(search) 
      if (offset != -1) { // if cookie exists 
         offset += search.length 
         // set index of beginning of value 
         var end = document.cookie.indexOf(";", offset) 
         // set index of end of cookie value 
         if (end == -1) end = document.cookie.length 
         return unescape(document.cookie.substring(offset, end)) 
      } 
   } 
} 
function delCookie(name,path,domain) {
   if (getCookie(name)) document.cookie = name + "=" +
      ((path)   ? ";path="   + path   : "") +
      ((domain) ? ";domain=" + domain : "") +
      ";expires=Thu, 01-Jan-70 00:00:01 GMT";
}

Open in new window

0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now