Solved

JAVASCRIPT: Needing a Sequential instead of Random Image Replacement Script

Posted on 2008-10-02
1
390 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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying 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
Problem to run jar file 4 151
Reorder multi file names 17 69
How to get some freezing/smog animation effect on a website? 2 115
Converting dates in JavaScript 2 51
Some of the SEO trends we might expect in 2017.
When it comes to protecting Oracle Database servers and systems, there are a ton of myths out there. Here are the most common.
Established in 1997, Technology Architects has become one of the most reputable technology solutions companies in the country. TA have been providing businesses with cost effective state-of-the-art solutions and unparalleled service that is designed…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

856 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