Imitate the google adsense color picker code, extract it from the Zhongyi Advertising Alliance program original_javascript skills imitate the goolge adsense color selector code extraction

Imitate google adsense color picker code
css code

<style type="text/css">  
BODY {  
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #02418a; PADDING-TOP: 0px; FONT-FAMILY: Arial  
}  
FORM {  
    MARGIN: 0px  
}  
INPUT {  
    MARGIN: 0px  
}  
TABLE {  
    FONT-WEIGHT: normal; FONT-SIZE: 12px; LINE-HEIGHT: 170%; FONT-FAMILY: Arial  
}  
A:link {  
    COLOR: #02418a; TEXT-DECORATION: none  
}  
A:visited {  
    COLOR: #02418a; TEXT-DECORATION: none  
}  
A:hover {  
    COLOR: #ff0000; TEXT-DECORATION: none  
}  
.colorhover {  
    BORDER-RIGHT: blue 1px solid; BORDER-TOP: blue 1px solid; DISPLAY: block; MARGIN-LEFT: 4px; BORDER-LEFT: blue 1px solid; WIDTH: 20px; CURSOR: pointer; BORDER-BOTTOM: blue 1px solid; HEIGHT: 16px  
}  
TABLE.palette {  
    BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; FONT-SIZE: 5px; BACKGROUND: #000000; BORDER-LEFT: #999999 1px solid; BORDER-BOTTOM: #999999 1px solid; BORDER-COLLAPSE: collapse  
}  
TABLE.palette TD A {  
    DISPLAY: block; TEXT-DECORATION: none  
}  
TABLE.palette TD A p {  
    WIDTH: 20px; HEIGHT: 20px  
}  
TABLE.palette A {  
    BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #cccccc 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #cccccc 1px solid  
}  
TABLE.palette A:hover {  
    BORDER-RIGHT: red 1px solid; BORDER-TOP: red 1px solid; BORDER-LEFT: red 1px solid; CURSOR: pointer; BORDER-BOTTOM: red 1px solid  
}  
</style>

Core javascript code used to imitate google adsense color picker code

<script type="text/javascript">  
//中易广告联盟程序 By www.zyiis.com QQ:381611116   
function showPicker(colorField,atElement){  
    var picker=document.getElementById("color_picker");      
    var element=(atElement!=undefined)  
    ?atElement  
    :document.getElementById("zyad_style_color_"+colorField);      
    //alert (getTopOffset(document.all.zyad_style_color_border));  
    pickerField=colorField;      
    picker.style.top=getTopOffset(element);      
    picker.style.left=getLeftOffset(element)+90;      
    picker.style.display=&#39;block&#39;;      
    document.onmouseup=hidePicker;      
}  
function hidePicker(){  
      
    var picker=document.getElementById("color_picker");      
    pickerField=null;      
    picker.style.display=&#39;none&#39;;      
    clicked=false;      
}  
function getTopOffset(element){  
    return (element==document.body)  
    ?0  
    :(element.offsetTop+getTopOffset(element.offsetParent));      
}  
function getLeftOffset(element){  
    return (element==document.body)  
    ?0  
    :(element.offsetLeft+getLeftOffset(element.offsetParent));      
}  
function selectColor(colorValue){  
    elem("colorsample-"+pickerField).style.backgroundColor=&#39;#&#39;+colorValue;      
      
    if(external){  
        elem("zyad_style_color_"+pickerField).value=colorValue;          
    }  
    if(pickerField==&#39;background&#39;)elem("zyad_style_bg").style.backgroundColor=&#39;#&#39;+colorValue;      
    if(pickerField==&#39;border&#39;){  
        elem("zyad_style_bg").style.border=" 1px solid #"+colorValue;          
          
        elem("zyad_style_copy").style.backgroundColor=&#39;#&#39;+colorValue;          
        elem("zyad_style_copy").style.color=&#39;#&#39;+getTextHex(colorValue);          
    }  
    if(pickerField==&#39;sitename&#39;)  
    {  
        elem("zyad_style_site_name").style.color=&#39;#&#39;+colorValue;          
        elem("zyad_style_site_name1").style.color=&#39;#&#39;+colorValue;          
    }  
    if(pickerField==&#39;intro&#39;)  
    {  
        elem("zyad_style_site_intro").style.color=&#39;#&#39;+colorValue;          
        elem("zyad_style_site_intro1").style.color=&#39;#&#39;+colorValue;          
    }  
    if(pickerField==&#39;siteurl&#39;)  
    {  
        elem("zyad_style_site_siteurl").style.color=&#39;#&#39;+colorValue;          
        elem("zyad_style_site_siteurl1").style.color=&#39;#&#39;+colorValue;          
    }  
    pickerField=null;      
    hidePicker();      
    getcode();      
}  
function elem(element)  
{  
    return document.getElementById(element);      
}  
function toColor(h){  
    return [parseInt(h.substring(0,2),16),  
    parseInt(h.substring(2,4),16),  
    parseInt(h.substring(4,6),16)];      
}  
function getTextHex(c){  
      
    if(c=="FFFFFF")  
    {  
        return "000";          
    }  
    else   
    {  
        return "FFFFFF";          
    }  
      
}  
function get_trans_codes()  
{  
    getcode()  
}  
function copymetasearch(sel_obj){  
    highlightmetasearch(sel_obj);      
    textRange=sel_obj.createTextRange();      
    textRange.execCommand("RemoveFormat");      
    textRange.execCommand("Copy");      
}  
function highlightmetasearch(sel_obj){  
    sel_obj.select();  
    sel_obj.focus();      
}  
/////  
function get_Option_Value(Options){  
    if(Options&&Options.length){  
        for(var i=0;i<Options.length;i++){  
            if(Options[i].selected){  
                return Options[i].value;                  
            }  
        }  
    }else {  
        return ;  
          
    }  
}  
function get_radio_value(field){  
    if(field&&field.length){  
        for(var i=0;i<field.length;i++){  
            if(field[i].checked){  
                return field[i].value;                  
            }  
        }  
    }else {  
        return ;  
          
    }  
}  
function get_checkbox_value(field){  
    if(field.checked){  
        return field.value;          
    }  
    return "";      
}  
function get_style_codes(){  
    style=elem("get_style").value;      
    var p=style.split(&#39;,&#39;);      
    zyad_style_color_border=p[0];      
    zyad_style_color_sitename=p[1];      
    zyad_style_color_background=p[2];      
    zyad_style_color_intro=p[3];      
    zyad_style_color_siteurl=p[4];      
    var zyad_style_copy_d=get_radio_value(form_zyad_codes.ad_iframe);      
    elem("zyad_style_color_border").value=zyad_style_color_border;      
    elem("zyad_style_color_sitename").value=zyad_style_color_sitename;      
    elem("zyad_style_color_background").value=zyad_style_color_background;      
    elem("zyad_style_color_intro").value=zyad_style_color_intro;      
    elem("zyad_style_color_siteurl").value=zyad_style_color_siteurl;      
    if(zyad_style_copy_d==1){  
          
        elem("zyad_style_bg").style.border=" 1px solid #"+zyad_style_color_border;  
    }  
    else   
    {  
        elem("zyad_style_bg").style.border=" 0px solid #ffffff";          
          
    }  
    elem("zyad_style_copy").style.backgroundColor=&#39;#&#39;+zyad_style_color_border;      
    elem("zyad_style_copy").style.color=&#39;#&#39;+getTextHex(zyad_style_color_border);      
    elem("zyad_style_site_name1").style.color=&#39;#&#39;+zyad_style_color_sitename;      
    elem("zyad_style_site_name").style.color=&#39;#&#39;+zyad_style_color_sitename;      
    elem("colorsample-border").style.backgroundColor=zyad_style_color_border;      
    elem("colorsample-sitename").style.backgroundColor=zyad_style_color_sitename;      
    elem("colorsample-background").style.backgroundColor=zyad_style_color_background;      
    elem("colorsample-intro").style.backgroundColor=zyad_style_color_intro;      
    elem("colorsample-siteurl").style.backgroundColor=zyad_style_color_siteurl;      
    getcode();      
}  
</script>