Solved

JAVASCRIPT: Needing a Sequential instead of Random Image Replacement Script

Posted on 2008-10-02
1
386 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
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Possible fixes for Windows 7 and Windows Server 2008 updating problem. Solutions mentioned are from Microsoft themselves. I started a case with them from our Microsoft Silver Partner option to open a case and get direct support from Microsoft. If s…
Restoring deleted objects in Active Directory has been a standard feature in Active Directory for many years, yet some admins may not know what is available.
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.

763 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

10 Experts available now in Live!

Get 1:1 Help Now