Use javascript to control cookie display and hide background images

Whenever a major holiday, each big mainstream web site home page will be put on the festival clothes, designers tend to use a background image to obtain a better visual impact effect, of course, also want to consider some users are not used to this big background, then placed the "close" button on the background map is necessary, the user simply click the "turn off" button, a sharp background will disappear.

We use javascript to control the background picture show and hide, when click the close button, make the page not loading control CSS background images, at the same time record the COOKIE related parameters, and the validity of the setting cookies, then refresh the page, in the duration of the COOKIE won't load background, if the COOKIE expires, would reload the background image.

HTML

Generally, the close button of the background picture is placed at the head of the page. We put the close background button at the top of the page. Of course, this button is the finished picture.

<div id="top"> 
    <em id="close_btn" title=" Close the background "></em> 
</div> 

CSS

We also need to prepare a large background image, we found a large background image from the Internet to use, using CSS to do a simple page layout.

*{margin:0; padding:0} 
body{font:12px/18px "Microsoft Yahei",Tahoma,Arial,Verdana,"5b8b4f53", sans-serif;} 
#top{clear:both;width:1000px;height:60px;margin:0 auto;overflow:hidden;position:relative;} 
#close_btn{width:60px;height:20px;position:absolute;right:0;bottom:25px;cursor:pointer; 
display:block;z-index:2;} 

With CSS deployed and the page still not working, we need to use javascript to load the background image.
Javascript
When the page is loaded for the first time (no cookies, etc.), of course, the background image is loaded to display the full page. When we click the "close" button, the Javascript will kill the background image that has been loaded on the page, that is, it will not be displayed, and set the cookie to control whether the large background image is displayed by the expiration time of the cookie. That is, when the next page is refreshed, if the cookie is not expired, the large background picture will not be loaded; otherwise, the large background picture will be loaded. Please see the code:

 

$(function(){ 
    if(getCookie("mainbg")==0){ 
        $("body,html").css("background","none"); 
        $("#close_btn").hide(); 
    }else{ 
        $("body").css("background","url(images/body_bg.jpg)) no-repeat 50% 0"); 
        $("html").css("background","url(images/html_bg.jpg) repeat-x 0 0"); 
        $("#close_btn").show().css("background","url(images/close_btn.jpg) no-repeat"); 
    } 
    //Click on close
    $("#close_btn").click(function(){ 
        $("body,html").css("background","none"); 
        $("#close_btn").hide(); 
        setCookie("mainbg","0"); 
    }); 
}) 

Obviously, we control the loading of the background diagram by setting the CSS background attribute of the page element's background, and we read and set the cookie through two custom functions, getCookie() and setCookie().

 

//Set the cookie
function setCookie(name,value){ 
    var exp = new Date();  
    exp.setTime(exp.getTime() + 1*60*60*1000);//Valid for 1 hour
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 
//Take cookies function
function getCookie(name){ 
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); 
    if(arr != null) return unescape(arr[2]); return null; 
}