CSS + javascript dialog box of colors

Posted by john
1/4/2007
Related Tags:
css javascript 

  Color.js Color dialog according to the actual situation of the implementation of changes setcolor function 

  / / JavaScript Document 
  Function getcolor () 
  (... 
  Var s = ""; 
  S +=("< div class = 'color'>"); 
  S +=("< div style = 'height: 40px ;'>"); 
  S +=("< table> <tr> <td> <div id='ccc' style='width:100px;height;40px;background-color:#000000;'> </ div> "); 
  S +=("</ td> <td> <input type='text' id='cc' size='10' value='#000000'/> </ td> </ tr> </ table> ") ; 
  S +=("</ div> "); 
  S +=("< div class = 'bcolor'> <table cellspacing='0' cellpadding='0'> <tr> "); 
  For (var r = 0; r <= 15, r + = 3) 
  (... 
  If (r = 9) 
  S +=("</ tr> <tr> "); 
  S +=("< td> "); 

  S +=("< table cellspacing ='0 'cellpadding ='0'>"); 
  For (var b = 0; b <= 15; b + = 3) 
  (... 
  S +=("< tr> "); 
  For (var g = 0; g <= 15; g + = 3) 
  (... 
  / / If (b == 9) s +=("</ tr> <tr> "); 
  Var rr = r.toString (16); 
  Rr rr + =; 
  Var bb = b.toString (16); 
  Bb + = bb; 
  Var gg = g.toString (16); 
  Gg + = gg; 
  S + = "<td class = 'ctd' onmousemove = 'movecolor ("#"+ rr + gg + bb +"")'"; 
  S + = "onclick = 'setcolor ("#"+ rr + gg + bb +"")' style =' border: 1px solid # 000"; 
  S + = "background-color: #" + + gg + bb rr +";'>"; 
  S +="</ td> "; 

  ) 
  S +=("</ tr> "); 
  ) 
  S +=("</ table> "); 
  S +=("</ td> "); 


  ) 
  S +=('</ tr> </ table> </ div> </ div> '); 
  Return s; 
  ) 
  Function getobj (id) 
  (... 
  Return document.getElementById (id); 
  ) 
  Function movecolor (color) / / Mouse over the operation of a certain color 
  (... 
  Getobj ( "ccc"). Style.backgroundColor = color; 
  Getobj ( "cc"). Value = color; 

  ) 
  Function setcolor (color) / / mouse click after the operation of a color 
  (... 
  Getobj ( "colordiv"). Style.backgroundColor = color; 
  Getobj ( "cccc"). Style.display = "none"; 
  ) 

  Test.html test 

<html>
<head>
  <script Type="text/javascript" src="color.js"> 
  </ Script> 
  <style Type="text/css"> 
  . Color (border: 1px solid # 9999FF; width: 300px;) 
  . Bcolor (background-color: # e5e5ef; border: 1px solid # eba8ff; cursor: hand;) 
  . Ctd (margin: 0; padding: 0; height: 15px; width: 15px;) 

  </ Style> 
  <script Type="text/javascript"> 
  Function c_click () ( 
  Var e = window.event; 
  Getobj ( "cccc"). InnerHTML = getcolor (); 
  Getobj ( "cccc"). E.x style.left = + "px"; 
  Getobj ( "cccc"). E.y style.top = + "px"; 
  Getobj ( "cccc"). Style.display = ""; 
  ) 

  </ Script> 
  </ Head> 
  <button Onclick="c_click()"> color </ button> 
  <div Id="cccc" style="display:none; border-width:0; position:absolute; z-index:1000; width:200px; height:180px; "> </ div> 
  <div Style="width:80px;height:30px;backgroundColor=#000" id="colordiv"> </ div> 

  </ Body> 
  </ Html> 

  What needs to be modified or do you have a better method of the implementation of the Comments requested 




Related articles:

AS explained the basic code
  Basic Action.    Include:    -- Go to Jump to a specific frame - Play players - Stop stop - Toggle High Quality in high-quality and low-quality inter-switch - Stop All Sounds cessation of all voice broadcast - Get URL Jump to a super-link - FSCommand Send FSCommand order ...
Flash-picture production biopsy results animation
  Animation effects Demo:    Click the document    Yesterday, a person asked a similar effect over the production method that is to start their own picture into several parts of it was later found that is not the case with this shielding effect is done.    First...
Dreamweaver MX 2004 from scratch (1)
  With the popularity of Internet, many people have not been satisfied with the mere surfing the Internet, and deeply involved in the hope that one.    Now, have their own Web site has become a trend.    Although the production of a simple web is not difficult, but produced...
Making use Dreamweaver plug-in scrolling text effects
  Plugin name: Marquee    Features: Production scrolling text.    You must be on the Frontpage in the big-screen text remember it, Hei hei With this plug-in Dreamweavr also……    Operation Example:    1, in the choice of targets panel    Butt...
Ajax Asp.net2005 not achieve certification set user name, password and the code Chinese
  Main functions: to achieve set of user name, password, Chinese code validation!    Technology: Use. NEt2005 new interface "ICallbackEventHandler" asp.net using dynamic code generation Chinese    Huabuche said that the direct look at the code,    As ...