Solved

JAVASCRIPT: Needing a Sequential instead of Random Image Replacement Script

Posted on 2008-10-02
1
391 Views
Last Modified: 2012-05-05
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
Comment
Question by:aztecgreen
1 Comment
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 350 total points
ID: 22631931
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Time picker 4 471
IE 11 javascript function not working 13 198
Drag and drop columns in Wordpress WPDataTables 9 220
Assess if java script has insecure coding issue 1 142
A company’s centralized system that manages user data, security, and distributed resources is often a focus of criminal attention. Active Directory (AD) is no exception. In truth, it’s even more likely to be targeted due to the number of companies …
Read our guide on how to survive being on-call.
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question