Solved

JAVASCRIPT: Needing a Sequential instead of Random Image Replacement Script

Posted on 2008-10-02
1
387 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Javascript cookie for whole domain 4 192
Save user setting in html 3 181
js file for one script block only 4 141
Passing a text to parent window 4 27
In 2017, ransomware will become so virulent and widespread that if you aren’t a victim yourself, you will know someone who is.
With the rapid rise in mobile usage, mobile devices are here to stay and have become an integral part of doing business. Here are 9 great apps for your BYOD environment.
This Micro Tutorial will teach you how to censor certain areas of your screen. The example in this video will show a little boy's face being blurred. This will be demonstrated using Adobe Premiere Pro CS6.
Many functions in Excel can make decisions. The most simple of these is the IF function: it returns a value depending on whether a condition you describe is true or false. Once you get the hang of using the IF function, you will find it easier to us…

920 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now