Web Analytics Made Easy -
StatCounter changing images each visit using cookies - CodingForum

Announcement

Collapse
No announcement yet.

changing images each visit using cookies

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • changing images each visit using cookies

    i am looking for help with a school assignment. i have a document that places, reads cookies, and counts visits. it's design is to display text reading: "you have visited this site "x" times. this works fine - last week's assign. My assignment this week is to modify this document to display 4 images in succession. first, using a series of "if" statements within the body. next, is to replace if statements with switch statement. finally, to use an array to display images.
    i've been working on this for a week, and have made seemingly no progress. i would greatly appreciate any help, advice or suggestions.
    this is my starting point:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML lang="en">
    <HEAD>
    <TITLE>Track User Visits</TITLE>
    <!--
    Author:	Alan Hakala
    Date:		3-31-09
    Modified:	4-4-09	
    Purpose:	To track the number of visits by a user
    Status:	Finished
    -->
    <script type="text/javascript">
    //genric function to add cookie to users computer
    function addCookie(tag, value) 
    {//begins addcookie function
    	//declares variable named expiredate and opens date instance
        var expireDate = new Date();
    	//declares varialble named expirestring 
        var expireString = "";
    	//sets time for argument (expiration) to be executed
        expireDate.setTime(expireDate.getTime() + (1000 * 60 * 60 * 24 * 365));
    	//compares users computer date and time to GMT ?
        expireString = "expires=" + expireDate.toGMTString();
    	//writes cookie
        document.cookie = tag + "=" + escape(value) + ";" + expireString + ";";
    }//ends addcookie function
    //generic function to read a cookie
    function getCookie(tag) 
    {//begins getcookie function
    	//declares variable named value and assigns it a value of null
        var value = null;
    	//declares a varible named mycookie
        var myCookie = document.cookie + ";";
    	//declares a variable named find tag with value of tag +
        var findTag = tag + "=";
    	//declares a variable named end pos
        var endPos;
        if (myCookie.length > 0)
    	    {//begins if #1
    		//declares variable named beginpos
            var beginPos = myCookie.indexOf(findTag);
            if (beginPos != -1) 
    			{//begins if #2
                 beginPos += findTag.length;
                 endPos = myCookie.indexOf(";", beginPos);
                    if (endPos == -1)
                    endPos = myCookie.length;
                    value = unescape(myCookie.substring(beginPos, endPos));
                }//ends if #2
            }//ends if #1
           return value
    }//ends getcookie function
    //declares a variable named visits and assigns an initial value of 0
    var visits = 0;
    //reassigns visits the value stored in the VisitNumber cookie
    visits= getCookie("VisitNumber")
    //if a value is stored
    if (visits != null)
        {//begins if #1
        //assign visits the value of the cookie (as an integer) and add 1 for this visit
        visits = parseInt(visits) + 1
        }//ends if #1
        //if the cookie does not have a value, it is the first visit; assign visits a value of 1
        else
    		{//begins else #1
            visits = 1
    		}//ends else #1
    //call the addCookie() function to store the new value of visits in the VisitNumber cookie
    addCookie("VisitNumber", visits)
    </script>
    </HEAD>
    <BODY>
    <script type = "text/javascript">
    //declare a variable named visits and assign it a blank value
    var visits = "";
    //reassign visits the value that is stored in the VisitNumber cookie
    visits = getCookie("VisitNumber")
        //if there is a value stored in the visit number cookie,
        //write a statement that displays that visit number
    	if(visits != null)
    		{
    	    document.write ("You have visited this site " + visits + " times.");
    		}
    var displayBanner="src='Banners/Banner1.jpg'";
    </script>
    </BODY>
    </HTML>
    thanks, alan

  • #2
    My assignment this week is to modify this document to display 4 images in succession using a series of "if" statements within the body. If what? Do you mean based on the number of times the user has visited the site?
    1 visit = image1, 2 visits = image2 and so on? And if 0 visits?

    This is a homework assignment, and to be candid I do not believe that you wrote the cookie script you have posted.

    Make an effort yourself, post the code you yourself have written, and then I am sure that someone will offer you assistance or corrections.


    I have nothing but confidence in you. And very little of that.
    Groucho Marx (1890 - 1977)

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

    Comment


    • #3
      response to phillip m

      yes, you are correct. i am sorry that i wasn't totally clear. i'll try to clarify. this is a homework assignment, and no i did not write. it is "learning activities" followed from a guided project. and yes, you are correct; if first visit, image 1, and so on. and about visits = 0, i have declared a variable named visits assigning it an initial value of 0. but, then immediately following reassigning visits the value stored in the visit number cookie. this assignment is to display images 1-4 in succession with each visit, then starting over again with image 1. i've worked on this many hours, starting from "scratch" or, at least from the document that was specified in the assignment, which i labeled as my starting point in my original post.
      i have given up on the if, and switch documents to work backwards now from the array. this is what i have so far:
      Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <HTML lang="en">
      <HEAD>
      <TITLE>Track User Visits</TITLE>
      <!--
      Author:	Alan Hakala
      Date:		3-31-09
      Modified:	4-4-09	
      Purpose:	To track the number of visits by a user
      Status:	Finished
      -->
      <script type="text/javascript">
      //genric function to add cookie to users computer
      function addCookie(tag, value) 
      {//begins addcookie function
      	//declares variable named expiredate and opens date instance
          var expireDate = new Date();
      	//declares varialble named expirestring 
          var expireString = "";
      	//sets time for argument (expiration) to be executed
          expireDate.setTime(expireDate.getTime() + (1000 * 60 * 60 * 24 * 365));
      	//compares users computer date and time to GMT ?
          expireString = "expires=" + expireDate.toGMTString();
      	//writes cookie
          document.cookie = tag + "=" + escape(value) + ";" + expireString + ";";
      }//ends addcookie function
      //generic function to read a cookie
      function getCookie(tag) 
      {//begins getcookie function
      	//declares variable named value and assigns it a value of null
          var value = null;
      	//declares a varible named mycookie
          var myCookie = document.cookie + ";";
      	//declares a variable named find tag with value of tag +
          var findTag = tag + "=";
      	//declares a variable named end pos
          var endPos;
          if (myCookie.length > 0)
      	    {//begins if #1
      		//declares variable named beginpos
              var beginPos = myCookie.indexOf(findTag);
              if (beginPos != -1) 
      			{//begins if #2
                   beginPos += findTag.length;
                   endPos = myCookie.indexOf(";", beginPos);
                      if (endPos == -1)
                      endPos = myCookie.length;
                      value = unescape(myCookie.substring(beginPos, endPos));
                  }//ends if #2
              }//ends if #1
             return value
      }//ends getcookie function
      //declares a variable named visits and assigns an initial value of 0
      var visits = 0;
      //reassigns visits the value stored in the VisitNumber cookie
      visits= getCookie("VisitNumber")
      //if a value is stored
      if (visits != null)
          {//begins if #1
          //assign visits the value of the cookie (as an integer) and add 1 for this visit
          visits = parseInt(visits) + 1
          }//ends if #1
          //if the cookie does not have a value, it is the first visit; assign visits a value of 1
          else
      		{//begins else #1
              visits = 1
      		}//ends else #1
      //call the addCookie() function to store the new value of visits in the VisitNumber cookie
      addCookie("VisitNumber", visits)
      //NNNN
      //creates a pictures array with four images
      var changeBanner= new Array(
      	"Banners/Banner1.jpg",
      	"Banners/Banner2.jpg",
      	"Banners/Banner3.jpg",
      	"Banners/Banner4.jpg");
      //variable to set picCounter value to 0
      var picCounter=0;
      //function to change pictures
      function changePictures()
      {//begins function
      //if array has been displayed reset picCounter to 0
      if(picCounter==changeBanner.length)
      	{
      	picCounter=0;
      	}
      document.Banner.src=changeBanner[picCounter];
      picCounter++;
      
      }//ends function
      </script>
      </HEAD>
      <BODY onLoad="changePictures()">
      <img src="Banners/Banner1.jpg" name="Banner"/>
      
      </BODY>
      </HTML>
      i hope this clarifies things a little. i have great confidence in myself, and little for those who would not automatically offer at least friendly encouragement. but, i thank you for your advice. i am new to this but, am a fast learner. i'm sure i'll get the hang of this soon. i could just use a little help... alan

      Comment


      • #4
        You can identify the image to be shown very simply by:-

        picCounter = visits%4;
        that is the remainder after division by 4 (the number of images). Result will be 0,1,2 or 3.

        The the image to display is:-
        changeBanner[picCounter].

        Remember that the index of the array changeBanner starts at 0.

        All the code given in this post has been tested and is intended to address the question asked.
        Unless stated otherwise it is not just a demonstration.

        Comment


        • #5
          thanks phillip

          that totally does not work. as if i hadn't thought of that route myself.
          your advice is less than no help, but thank you anyway. "master coder" lol

          Comment


          • #6
            Well, it works fine for me. Try this:-

            Code:
            var rude;
            var thanks;
            if (rude && !thanks) {
            var interestLost = true;
            var moreHelp = 0;
            }

            All the code given in this post has been tested and is intended to address the question asked.
            Unless stated otherwise it is not just a demonstration.

            Comment


            • #7
              Code:
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
              <html>
              <head>
              <title>No Title</title>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
              <script type="text/javascript">		
              
              	var imgPath = "./images/";   // the path to the banner image folder;
              
              	/* append images to the array as needed */
              
              	var imgSet = [];
              	imgSet[0] = "banner1.jpg";
              	imgSet[1] = "banner2.jpg";
              	imgSet[2] = "banner3.jpg";
              
              	var expDate = new Date();
              	expDate.setTime(expDate.getTime()+365*24*60*60*1000); 
              
              	function setCookie(isName,isValue,dExpires){
                     
              		document.cookie = isName+"="+isValue+";expires="+dExpires.toGMTString();
              	}
              
              	function getCookie(isName){
              
              		var cookieStr = document.cookie;
              		var startSlice = cookieStr.indexOf(isName+"=");
              		if (startSlice == -1){return false}
              		var endSlice = cookieStr.indexOf(";",startSlice+1)
              		if (endSlice == -1){endSlice = cookieStr.length}
              		var currValue = cookieStr.substring(startSlice,endSlice).replace(/^.+\=/,"");
              		return currValue;
              	}
              
              	function changePictures(){
              
              		var prevImage = getCookie('nVisits');
              		if (!prevImage || prevImage == imgSet.length-1){currImage = 0}
              		else 	{
              			 prevImage++;
              			 currImage = prevImage;
              			}
              		setCookie('nVisits',currImage,expDate);
              		document.getElementById('stepImg').src = imgPath + imgSet[currImage];
              	}
              
              	onload = changePictures;
              
              </script>
              <style type="text/css">
              
              	 body {background-color: #fffacd; margin-top: 60px;}	
              	#stepImg {display: block; margin-left: auto; margin-right: auto;} 
              
              </style>
              </head>
              	<body>
              		<img src="images/one.jpg" id="stepImg">
              	</body>
              </html>

              Comment

              Working...
              X