The goal is to click the image to replace the external style sheet (skin change) and save the last style setting in the cookie, even if the browser is closed, it is still the last skin. See the specific effect: http://www.feed-add.com/
If you do not feel at ease or are suspected of advertising, you can go to the homepage of CCTV or Tom. The principle and effect are similar but the method is different.
First, create a text file and enter the following Code :
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Link href = "CSS/style.css" type = "text/CSS" rel = "stylesheet"/>
<Script language = "JavaScript" type = "text/JavaScript">
Function getcookie (name)
{
VaR arr, Reg = new Regexp ("(^ |)" + name + "= ([^;] *) (; | $ )");
If (ARR = Document. Cookie. Match (REG) return Unescape (ARR [2]);
Else return NULL;
}
Function setcookie (name, value)
{
VaR days = 30;
VaR exp = new date ();
Exp. settime (exp. gettime () + days x 24x60*60*1000 );
Document. Cookie = Name + "=" + escape (value) + "; expires =" + exp. togmtstring ();
}
VaR csspath = "CSS/style ";
VaR styleid = 0;
// Document. Write ('<LINK rel = "stylesheet" type = "text \/CSS" id = "csslink" href = "'your csspathsf-styleid='.css" \/> '); Function stylechange (n ){
VaR csslink = Document. getelementbyid ("csslink ");
Csslink. href = csspath + N + ". CSS ";
Setcookie ("color", csspath + N + ". CSS ");
}
If (getcookie ("color ")! = NULL)
{
Document. write ('<LINK rel = "stylesheet" type = "text \/CSS" id = "csslink" href = "' + getcookie (" color ") + '"\/> ');
}
Else
{
Document. Write ('<LINK rel = "stylesheet" type = "text \/CSS" id = "csslink" href = "'?csspath=styleid='.css" \/> ');
}
</SCRIPT> </Head> <Body> <Div id = "title"> <A href = "javascript: stylechange (1);" class = "red" Title = "Purple"> purple </a>
<A href = "javascript: stylechange (2);" class = "yellow" Title = "yellow"> yellow </a>
<A href = "javascript: stylechange (3);" class = "blue" Title = "blue"> blue </a>
<A href = "javascript: stylechange (4);" class = "green" Title = "green"> green </a>
</Div>
<Div id = "warptest">
Test text test text </div>
</Body>
</Html> Folder Theme.gif
Create five new text files in this folder and rename them to style.css1_style1.css1_style2.css1_style3.cssand style4.css. The following are the content of each CSS file:
Style.css: # Title A. Red {background-position: 15px 0px ;}
# Title A. Yellow {background-position: 75px 0px ;}
# Title A. Blue {background-position: 55px 0px ;}
# Title A. Green {background-position: 95px 0px ;}
# Warptest {width: 480px; Height: 100px; Background: # f7f7f7; Border: 1px solid # d3d3d3; padding: 10px; color: #666; float: Left}
# Title {float: Left}
# Title A {margin-Right: 5px;
Width: 15px;
Height: 15px;
Text-indent:-999px;
Overflow: hidden;
Display: block;
Cursor: pointer;
Background-image: url(theme.gif );}
Style1.css: # Warptest {width: 480px; Height: 100px; Background: # fdf8f8; Border: 1px solid #990099; padding: 10px; color: #990099}
# Title A. Red {background-position: 15px 15px ;}
Style2.css:
# Warptest {width: 480px; Height: 100px; Background: # fffff7; Border: 1px solid # ffcc00; padding: 10px; color: # b28f06}
# Title A. Yellow {background-position: 75px 15px ;} Style3.css:
# Warptest {width: 480px; Height: 100px; Background: # e8f5fe; Border: 1px solid # a9c9e2; padding: 10px; color: #1b3d58}
# Title A. Blue {background-position: 55px 15px ;}
Style4.css:
# Warptest {width: 480px; Height: 100px; Background: # f8ffe7; Border: 1px solid # abdc8d; padding: 10px; color: # 33581d}
# Title A. Green {background-position: 95px 15px ;}
Now, you can use your browser to open index.html to see if it is handsome. |
