Add Page Option Button on web page

On the home page of msn, yahoo, there are page option buttons, which allow the visitors to customize the theme they like. Here we introduce how to make a simple page option by our own.

page options

HTML of the page option

The page option just looks like a drop down menu, but just one list. 6 theme buttons are designed. Click the button and theme is changed accordingly.

<div style="margin-left:10px">
    <h4 class="pg">
         page options</h4>
            <div class="sc"><div class="subc" style="visibility:hidden;" id="Div1" >
                 <ul id="Ul1" class="uls2">
                      <li >
                        <div>
                            <div id="Div2" class="cl" style="background-color: #FFFF33">                                   
                            </div></div>
                            <div id="Div3" class="cl" style="background-color: #FFFF00">
                            </div>
                            <div id="Div4" class="cl" style="background-color: #CCFFFF">
                            </div>
                            <div id="Div5" class="cl" style="background-color: #CCFFCC">
                            </div>
                            <div id="Div6" class="cl" style="background-color: #CCFF99">
                            </div>
                            <div id="Div7" class="cl" style="background-color: #CCFF99">
                            </div>
                            </li> </ul></div></div></div>

CSS code

Besides the css code for the layout of page option button, 6 color themes for the page layout need to be designed. It's not a small work, but not so difficult using our 2 column layout generator. Save them into 6 different stylesheet files. Now we can add actions.

Javascript Code

The js script completes 2 tasks. Add event to the buttons. Load external css files when the specific button is clicked.

function loadcss(filename){
    var fileref=document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", filename);
    if (typeof fileref!="undefined") {
		document.getElementsByTagName("head")[0].appendChild(fileref);
	} 
}

function removecss(filename){

var linktags=document.getElementsByTagName("link")
  
	for (var i=linktags.length; i>=0; i--){ 
		if (linktags[i] && linktags[i].getAttribute("href")!=null && linktags[i].getAttribute("href").indexOf(filename)!=-1) {			
			linktags[i].parentNode.removeChild(linktags[i]) 			
		}
	}
}

var oldid = "style/ht_pg.css";
var curid;

function getTargetElement(evt) {
    var elem
	if (evt.target) {
	    elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target

} else {
	    elem = evt.srcElement

}
	    return elem

}
    
function ldcss(evt) {
    evt = (evt) ? evt : ((window.event) ? window.event : "")
    if (evt) {
       var elem = getTargetElement(evt);
       if (evt.type == "mouseover") {
           elem.className = "clt";
       }
       if (evt.type == "mouseout") {
           elem.className = "cl";
              
       }
       if (evt.type == "click") {
           curid = elem.id;
           removecss(oldid);
           loadcss(cssid(curid));
           oldid=cssid(curid);
                      
       }
    }
 }
  
 function setpageEvent(evt) {
    evt = (evt) ? evt : ((window.event) ? window.event : "")
    if (evt) {
       var elem = getTargetElement(evt);
         
       if (evt.type == "click") {
            if (document.getElementById("kwa").style.visibility=="hidden") {
                document.getElementById("kwa").style.visibility="visible";
                elem.className = "pg2";
            }
            else if (document.getElementById("kwa").style.visibility=="visible") {
                document.getElementById("kwa").style.visibility="hidden";
                elem.className = "pg";
            }
           
          }
       }
    }