To keep all image codes in the CSS, display layout images as div backgrounds.
Use external CSS with an id:
Code: Select all
<link rel="stylesheet" id="designstyle" type="text/css" href="layout1.css" media="all" />
Code: Select all
<body onload="tasteit()">
Cookie oven (don't change it):
Code: Select all
function eatCookie(c_flavor) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_flavor + "="); if (c_start!=-1) { c_start=c_start + c_flavor.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; }
function bakeCookie(c_flavor,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_flavor+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toUTCString()); }
Code: Select all
var flavor = "1";
function bake1() { document.getElementById('designstyle').href = 'layout1.css';
flavor = "1"; bakeCookie('flavor',flavor,365); }
function bake2() { document.getElementById('designstyle').href = 'layout2.css';
flavor = "2"; bakeCookie('flavor',flavor,365); }
Code: Select all
function tasteit() { flavor=eatCookie('flavor');
if (flavor=="1") { bake1(); }
if (flavor=="2") { bake2(); } }