Solved

JAVASCRIPT: Needing a Sequential instead of Random Image Replacement Script

Posted on 2008-10-02
1
394 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

With the rising number of cyber attacks in recent years, keeping your personal data safe has become more important than ever. The tips outlined in this article will help you keep your identitfy safe.
First of all let me say that the only language that I speak is English, but in answering questions here I often come across people whose English skills are not the best and I’d like to be able to communicate better with them, and the following descr…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.

626 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