SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Location
    Somewhere out there...
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image change with Javascript/cookie?

    I've been trying for a while to find a javascript that will:

    (1) use cookies to find out if a user has been to the page or how many times.

    and

    (2)based on this, show a different picture every time the page is refreshed or reopened.

    Basically I would like to find a script that will show a different picture every time someone opens or refreshes the page. But I don't want to use a 'random' script because I want to make sure that it's different by going through a sequencial array or something, until the user has opened the page more times than there is images in the array. In which case, it will loop and go back to pic[0] in the array.
    I also don't have a clue about how to use php scripts (where to place them in a page, what else is needed to make them run, etc, etc.), so I haven't tried using them.
    I thought that Javascript with the use of cookies would be the best/easiest way, but it's proving harder than I thought.

    can anyone help me with this???

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a link to a working version of what you're looking for I believe.
    Keep hitting Refresh to view it in action.

    The code follows:
    Code:
    <html>
      <head>
        <title>Show image dependent on number of visits</title>
        
          <!-- Cookie Functions provided by J3i Inc. - http://www.square-unlimited.org/j3i/index.php -->
          <script language="Javascript">
          <!--
    
    // imgArray could be adapted to incorporate a URL as well so that each graphic when clicked would go to a different URL
    // Additionally, a slight amendment to the document.writeln statement would need to be made for this to be reflected
    // Be aware that the images are not currently pre-loaded.  You'd probably want to add that.
            var pathstring="images/"      
            var imgArray = new Array("image0","image1.gif","image2.gif","image3.gif","image4.gif","image5.gif","image6.gif","image7.gif");
    
            function getCookieVal(offset){
              var endstr = document.cookie.indexOf(";", offset);
              if (endstr == -1) endstr = document.cookie.length;
              return unescape(document.cookie.substring(offset, endstr));
            }
            
            function GetCookie(name){
              var arg = name + "=";
              var alen = arg.length;
              var clen = document.cookie.length;
              var i = 0;
              
              while (i < clen){
                var j = i + alen;
                if (document.cookie.substring(i, j) == arg) return getCookieVal (j);
                i = document.cookie.indexOf(" ", i) + 1;
                if (i == 0) break;
              }
              
              return null;
            }
            
            function SetCookie(name, value){
              var argv = SetCookie.arguments;
              var argc = SetCookie.arguments.length;
              var expires = (argc > 2) ? argv[2] : null;
              var path = (argc > 3) ? argv[3] : null;
              var domain = (argc > 4) ? argv[4] : null;
              var secure = (argc > 5) ? argv[5] : false;
              document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : "");
            }
            
            function DeleteCookie(name){
              var exp = new Date();
              FixCookieDate(exp);
              exp.setTime(exp.getTime() - 1);
              var cval = GetCookie (name);
              if (cval != null) document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
            }
            
            var expdate = new Date();
            var num_visits;
            expdate.setTime(expdate.getTime() + (5*24*60*60*1000));
            if (!(num_visits = GetCookie("num_visits"))) num_visits = 0;
    
    // Divides the number of visits by the number of images available and assigns the remainder to img_ref.
    // The remainder will always be an integer <= number of images.
             var img_ref = num_visits%imgArray.length;
    
    // Increments the num_visits and writes new value to cookie
            num_visits++;
            SetCookie("num_visits",num_visits,expdate);
    
    
            
        // -->
        </script>
      </head>
      <body>
    
        <script language="JavaScript" type="text/javascript">
        <!--
          document.write('<div style=\"font-family: arial; font-weight: bold;\">You have visited this page ' + num_visits + ' times.<\/div>'); 
    <!-- This line for debugging and demo purpose only and can be removed -->
          document.write('<div style=\"font-family: arial; font-weight: bold;\">This is image ' + img_ref + '<\/div>'); 
    <!-- Writes image to screen based on number of visits -->
          document.write('<img src=\"' + pathstring + imgArray[img_ref] + '\"\/');
        //-->
        </script>
      </body>
    </html>
    This has been a really interesting project and taught me a lot about cookies although I did pilfer most of the code from elsewhere


    Cheers,

    Andy
    From the English nation to a US location.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •