<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Négyzet választás</title>
      <meta name="author" content="Tóth Péter" />
      <meta name="copyright" content="© 2012, NYME SEK" />
      <meta http-equiv="date" content="2012-09-10" />
      <meta name="revised" content="Tóth Péter, 10/09/2012" />
      <meta name="description" content="JavaScript - Cookie kezelés - Négyzet választás" />
      <meta http-equiv="content-language" content="hu" />
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <style type="text/css">
        #idBox1,#idBox2,#idBox3{
           width:100px;
           height:100px;
           background-color:blue;
           margin:0px 50px 0px 0px;
           display:inline-block;
           border:0;
           padding:0;
           outline:0;
           }
      </style>
      <script type="text/javascript">
         <!--
         // Cookie érték kiolvasása
         // c_name - Cookie változó neve
         function getCookie(c_name){                                                  
            var i,j,x,y,ARRcookies=document.cookie.split(";");
            for (i=0;i<ARRcookies.length;i++){
               j=ARRcookies[i].indexOf("=");
               x=ARRcookies[i].substr(0,j).replace(/^\s*/,"").replace(/\s*$/,"");
               y=unescape(ARRcookies[i].substr(j+1));
               if(x==c_name)return y;
               }
            return "";
            }
         // Cookie adat mentése
         // c_name - Cookie változó neve
         // ertek  - Cookie értéke
         // exdays - mennyi napig létezzen a Cookie változó
         function setCookie(c_name,ertek,exdays){
            var exdate=new Date();
            exdate.setDate(exdate.getDate() + exdays);
            var c_value=escape(ertek);
            document.cookie=c_name+"="+c_value+((exdays==null) ? "" : "; expires="+exdate.toGMTString());
            if(getCookie(c_name)!=ertek)alert("Nem engedélyezett a cookie kezelés!");
            }
         // OnLoad függvény
         function funcStart(){
            // Lekérdezzük a folyamat elején a Cookie értéket
            var iIdx=new Number(getCookie("box"));
            // Ellenőrizzük, hogy volt-e megfelelő értéke az oldal frissítése előtt a Cookie változóban
            if((iIdx>=1)&&(iIdx<=3)){
               // Beállítjuk a megfelelő színt
               document.getElementById("idBox"+iIdx).style.backgroundColor="red";
               }
            }
         // OnClick lekezelése
         // idx - Megmutatja, hogy melyik index-ű négyzet volt lenyomva
         function funcKlick(idx){
            // Elmentjük cookie adatba a kijelölt téglalap azonosítóját
            setCookie('box',idx,1);
            // Újratöltjük a weboldalt;
            location.reload();
            }
         -->
      </script>
   </head>
   <body onload="funcStart()">
      <div id="idBox1" onclick="javascript:funcKlick(1);"></div>
      <div id="idBox2" onclick="javascript:funcKlick(2);"></div>
      <div id="idBox3" onclick="javascript:funcKlick(3);"></div>
   </body>
</html>