Solved

javascript with multiple form input to one color chooser

Posted on 2009-04-05
3
349 Views
Last Modified: 2012-05-06
Why wont the javascript separate the form elements properly. My original problem was to input form elements for color choosing and also there were other elements such as a drop down menu. The javascript would not recognize the elements in the drop down. So I decided to break a nine part form into nine individual forms so that I could put the drop down menu after the radio input lines. I know it sounds stupid but I find that the radio boxes must have the same name to link them and by doing this I must use the array function so the radio inputs can become elements and would not need individual names. So I was happy with the array elements until I came to the drop down menu. I have 9 radio lines and then some extra drop downs and check boxes and this whole thing is multiplied 9 times, so I want a form for each of the 9 groups. I thought I had it licked when I put my javascript at the top but it outputs the second form to the first form. The script seems clear enough to work but it doesnt. The entire problem started when I wanted a color picker for vrml which is what this is. I modifed the hex output to become vrml. I did have another color picker which had the color info inside the form so I threw it out because I wanted it outside the form so I could have several forms but only one color data.
So perhaps if you can not fix this problem then you can give me advice on alternatives.



<HTML>

<HEAD>

<TITLE>The 216 Color Cube</TITLE>

<META name="keywords" content="216 color cube, javascript, phpfi,palette, background">

<META name="description" content="This page changes background color while passing the cursor over the NetScape 216 color palette. It uses JavaScript, and requires NetScape 3.0">

<script language="javascript">

function showColor(val) {

if (document.colorform.elements[1].checked) (document.colorform.elements[2].value) = val;

else if (document.colorform.elements[4].checked) (document.colorform.elements[5].value) = val;

else if (document.colorformtwo.elements[1].checked) (document.colorformtwo.elements[2].value) = val;

else if (document.colorformtwo.elements[4].checked) (document.colorformtwo.elements[5].value) = val;

}

</script>

</HEAD>

<BODY BGCOLOR="#FFFFFF">
 

<FORM NAME="colorform">

       

       <p>

       <li>

        <input name="" type="checkbox" value="">Moon 1<input name="choice" type="radio" value="" /><input type=text size=12 ></li>

                            </p><p>    

       <li>

        <input name="" type="checkbox" value="">Moon 2<input name="choice" type="radio" value="" /><input type=text size=12 ></li>

                             </p>  
 

</FORM>
 

<FORM NAME="colorformtwo">

       

       <p>

       <li>

        <input name="" type="checkbox" value="">Moon 1<input name="choice2" type="radio" value="" /><input type=text size=12 ></li>

                            </p><p>    

       <li>

        <input name="" type="checkbox" value="">Moon 2<input name="choice2" type="radio" value="" /><input type=text size=12 ></li>

                             </p>  
 

</FORM>
 

<CENTER>
 

<TABLE BORDER="1">
 
 

<TR>

        <TD BGCOLOR="#000000"><A href="javascript:showColor('0.00 0.00 0.00 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>

        <TD BGCOLOR="#000033"><A href="javascript:showColor('0.00 0.00 0.20 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>

        <TD BGCOLOR="#000066"><A href="javascript:showColor('0.00 0.00 0.40 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>

        <TD BGCOLOR="#000099"><A href="javascript:showColor('0.00 0.00 0.60 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>

        <TD BGCOLOR="#0000cc"><A href="javascript:showColor('0.00 0.00 0.80 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>

        <TD BGCOLOR="#0000ff"><A href="javascript:showColor('0.00 0.00 1.00 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
 

        <TD BGCOLOR="#006600"><A href="javascript:showColor('0.00 0.40 0.00 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>

        <TD BGCOLOR="#006633"><A href="javascript:showColor('0.00 0.40 0.20 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>

        <TD BGCOLOR="#006666"><A href="javascript:showColor('0.00 0.40 0.40 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>

        <TD BGCOLOR="#006699"><A href="javascript:showColor('0.00 0.40 0.60 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>

        <TD BGCOLOR="#0066cc"><A href="javascript:showColor('0.00 0.40 0.80 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>

        <TD BGCOLOR="#0066ff"><A href="javascript:showColor('0.00 0.40 1.00 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>

        <TD BGCOLOR="#00cc00"><A href="javascript:showColor('0.00 0.80 0.00 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>

        <TD BGCOLOR="#00cc33"><A href="javascript:showColor('0.00 0.80 0.20 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>

        <TD BGCOLOR="#00cc66"><A href="javascript:showColor('0.00 0.80 0.40 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
 

        <TD BGCOLOR="#00cc99"><A href="javascript:showColor('0.00 0.80 0.60 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>

        <TD BGCOLOR="#00cccc"><A href="javascript:showColor('0.00 0.80 0.80 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>

        <TD BGCOLOR="#00ccff"><A href="javascript:showColor('0.00 0.80 1.00 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
 

</TR>
 
 
 

</TABLE>
 
 
 

</CENTER>

</body>

</html>

Open in new window

0
Comment
Question by:johnh619
  • 2
3 Comments
 
LVL 3

Expert Comment

by:rtronsta
ID: 24075395
Hi :-) I`m not quite shure on what you want, but try this code:

<HTML>
<HEAD>
<TITLE>The 216 Color Cube</TITLE>
<META name="keywords" content="216 color cube, javascript, phpfi,palette, background">
<META name="description" content="This page changes background color while passing the cursor over the NetScape 216 color palette. It uses JavaScript, and requires NetScape 3.0">
<script language="javascript">
function showColor(val) {
var checkedArray=new Array();
for(var i=0; i<document.getElementsByTagName('INPUT').length; i++){
var currentElement=document.getElementsByTagName('INPUT')[i];

      if(currentElement.type=='checkbox'){
            if(currentElement.checked){
            currentElement.nextSibling.nextSibling.nextSibling.value=val;
            }
      
      }
}


}
</script>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
 
<FORM NAME="colorform">
       
       <p>
       <li>
        <input name="" type="checkbox" value="" id="0">Moon 1<input name="choice" type="radio" value="" /><input type=text size=12 id="moon1" ></li>
                            </p><p>    
       <li>
        <input name="" type="checkbox" value="" id="1">Moon 2<input name="choice" type="radio" value="" /><input type=text size=12 id="moon2" ></li>
                             </p>  
 
</FORM>
 
<FORM NAME="colorformtwo">
       
       <p>
       <li>
        <input name="" type="checkbox" value="" id="2">Moon 1<input name="choice2" type="radio" value="" /><input type=text size=12 id="choise3" ></li>
                            </p><p>    
       <li>
        <input name="" type="checkbox" value="" id="3">Moon 2<input name="choice2" type="radio" value="" /><input type=text size=12 id="choise4"></li>
                             </p>  
 
</FORM>
 
<CENTER>
 
<TABLE BORDER="1">
 
 
<TR>
        <TD BGCOLOR="#000000"><A href="javascript:showColor('0.00 0.00 0.00 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
        <TD BGCOLOR="#000033"><A href="javascript:showColor('0.00 0.00 0.20 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
        <TD BGCOLOR="#000066"><A href="javascript:showColor('0.00 0.00 0.40 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
        <TD BGCOLOR="#000099"><A href="javascript:showColor('0.00 0.00 0.60 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
        <TD BGCOLOR="#0000cc"><A href="javascript:showColor('0.00 0.00 0.80 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
        <TD BGCOLOR="#0000ff"><A href="javascript:showColor('0.00 0.00 1.00 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
 
        <TD BGCOLOR="#006600"><A href="javascript:showColor('0.00 0.40 0.00 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
        <TD BGCOLOR="#006633"><A href="javascript:showColor('0.00 0.40 0.20 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
        <TD BGCOLOR="#006666"><A href="javascript:showColor('0.00 0.40 0.40 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
        <TD BGCOLOR="#006699"><A href="javascript:showColor('0.00 0.40 0.60 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
        <TD BGCOLOR="#0066cc"><A href="javascript:showColor('0.00 0.40 0.80 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
        <TD BGCOLOR="#0066ff"><A href="javascript:showColor('0.00 0.40 1.00 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
        <TD BGCOLOR="#00cc00"><A href="javascript:showColor('0.00 0.80 0.00 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
        <TD BGCOLOR="#00cc33"><A href="javascript:showColor('0.00 0.80 0.20 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
        <TD BGCOLOR="#00cc66"><A href="javascript:showColor('0.00 0.80 0.40 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
 
        <TD BGCOLOR="#00cc99"><A href="javascript:showColor('0.00 0.80 0.60 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
        <TD BGCOLOR="#00cccc"><A href="javascript:showColor('0.00 0.80 0.80 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
        <TD BGCOLOR="#00ccff"><A href="javascript:showColor('0.00 0.80 1.00 ')"><IMG SRC="w.gif" HEIGHT="10" WIDTH="10" BORDER="0"></A></TD>
 
</TR>
 
 
 
</TABLE>
0
 

Author Comment

by:johnh619
ID: 24075721
rtronsta, thankyou for the reply! It does look like it has some possibilities however I could not get it to work. Also I decided my problem was inpossible since two or more radios are checked at same time.
I suspect you did not get it to work either. The first thing I see as an error would be that you are using the checkbox for the input. Actually the radio input should be used. Therefore the first box or element[0] is skipped, as is element[3] also on the second line and likewise in the second form. I only understand js so much and I see that what you wrote is confusing to me in part. You put in ids but you also use the word input instead of checkbox or radio; and you put in three siblings instead of one. I thought at one time putting two functions in would be better, one for each form but I dont know too much. I noticed you put in id but did no use the method getelementbyid but used getelementbyname; shouldnt id be in there somewhere? Since you did not refer to id in the script then the script can not see two forms but only one. I see where I made a mistake since if I had two buttons pushed at once then I could only choose one color and get that color into both test boxes; that would be wrong. So I must go back to earlier thinking where there would be only one large radio group. This would destroy the idea of multiple forms.
So it will not work   in any case.

The best idea of all is to have a popup color picker. Every color pick I find has an output of hex or dec and no vrml. Maybe you could help me modify one to output the vrml numbers. I have a color picker popup that has no  equations but has the hex codes and there are a lot. In some color pickers they only use the hex 11 33 66 99 cc and ff which makes it easy to replace, but the popup I found has many hex codes and would take forever to replace. The only hex to vrml converter I found does not work properly. The output for ff is about 2.5 and vrml is limited at 1.0.

My final idea is to make a table inside my accordian with a right and left half.
I would have nine accordion divisions with a table having a right and left half in
each division; The left table would have all the radio buttons and the right would
have the checkboxes and drop down menu. This way I could put all the radio buttons
for all 9 divisions in a row and number elements consecutivesly. I dont really like the
idea that much though it might work.

The radio buttons must be a single group to work and use one color at a time.
I dont know if this is possible with multiple forms.

Sincerely John Godfrey Hewett
0
 

Accepted Solution

by:
johnh619 earned 0 total points
ID: 24083161
well I figured it out after researching on the web. The trick is in using the automatic array ability in the form input names. So the group of radio inputs are numbered choice[] such that the word choice which binds the radio buttons together also becomes a separate array. Then I named all the text areas to the name text and then they became an array automatically. It was rough still since I wish to put the form into an accordion and some accodions will not accept so easy. I finally used the jquery accordion.  In case anyone should have a similar interest I have attached the main html code. The file is supposed to make vrml planetary systems with a complex set of php files associated with it; this is the gui for it.  And this will close the issue.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

<html>

<head>

<script src="lib/jquery.js" type="text/javascript"></script>       

		

<link rel="stylesheet" href="jquery-accordion/accordiondemo.css" />

	

<script type="text/javascript" src="array.js"></script>

   

<link type="text/css" rel="stylesheet" href="smarkup/skins/style.css" />

<link type="text/css" rel="stylesheet" href="smarkup/skins/default/style.css" />
 

<script src="jquery.ui-1.5.2/jquery-1.2.6.js" type="text/javascript"></script>

<script src="jquery.ui-1.5.2/ui/ui.core.js" type="text/javascript"></script>

<script src="jquery.ui-1.5.2/ui/ui.accordion.js" type="text/javascript"></script>

<link href="jquery.ui-1.5.2/themes/flora/flora.accordion.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="jqueryaccordion.css" />

<link rel="stylesheet" href="jquery-accordion/demo.css" />
 

</head>

    

<body bgcolor="#000044">
 

<div class="logo" style="position: absolute; top: 0px; left: 30px">

<img name="logo" src="logo.jpg" width="1130" height="24" alt=""></div>

 

<div class="accordion"  style="width:286px; height:600px; position: absolute; top: 30px; left: 30px">      

<form name="colorform">       

<ul id="jQueryUIAccordion1" class="ui-accordion-container">

<li> <span class="ui-accordion-left"></span> <a href='#' class="ui-accordion-link">Accordion Panel 1 Title<span class="ui-accordion-right"></span></a>

<div class="ui-accordion-data">

<ul>                          

<li><input name="" type="checkbox" value="">Planet One</li>

<li><input name="" type="checkbox" value="">Moon 1<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 2<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 3<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 4<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 5<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 6<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 7<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 8<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 9<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><font color=red> Planet One Attributes </font>

<li><input name="" type="checkbox" value="">Rings</li>

<li><input name="" type="checkbox" value="">Atmosphere<select name="">

     <option value="1">1</option>

      <option value="2">2</option>

       <option value="3">3</option>

        <option value="4">4</option>

         <option value="5">5</option>

          </select><input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Asteroid</li>

<li><input name="" type="checkbox" value="">Relief Surface</li>

<li><input name="" type="checkbox" value="">Clouds</li>

</ul>

</div>

</li>

  <li> <span class="ui-accordion-left"></span> <a href='#' class="ui-accordion-link">Accordion Panel 2 Title<span class="ui-accordion-right"></span></a>

    <div  class="ui-accordion-data">

<ul>                          

<li><input name="" type="checkbox" value="">Planet Two</li>

<li><input name="" type="checkbox" value="">Moon 1<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 2<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 3<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 4<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 5<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 6<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 7<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 8<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 9<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><font color=red> Planet One Attributes </font>

<li><input name="" type="checkbox" value="">Rings</li>

<li><input name="" type="checkbox" value="">Atmosphere<select name="">

     <option value="1">1</option>

      <option value="2">2</option>

       <option value="3">3</option>

        <option value="4">4</option>

         <option value="5">5</option>

          </select><input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Asteroid</li>

<li><input name="" type="checkbox" value="">Relief Surface</li>

<li><input name="" type="checkbox" value="">Clouds</li>

</ul>    

    

    </div>

  </li>

  <li> <span class="ui-accordion-left"></span> <a href='#' class="ui-accordion-link">Accordion Panel 3 Title<span class="ui-accordion-right"></span></a>

    <div  class="ui-accordion-data">

    <ul>                          

<li><input name="" type="checkbox" value="">Planet Two</li>

<li><input name="" type="checkbox" value="">Moon 1<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 2<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 3<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 4<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 5<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 6<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 7<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 8<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 9<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><font color=red> Planet One Attributes </font>

<li><input name="" type="checkbox" value="">Rings</li>

<li><input name="" type="checkbox" value="">Atmosphere<select name="">

     <option value="1">1</option>

      <option value="2">2</option>

       <option value="3">3</option>

        <option value="4">4</option>

         <option value="5">5</option>

          </select><input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Asteroid</li>

<li><input name="" type="checkbox" value="">Relief Surface</li>

<li><input name="" type="checkbox" value="">Clouds</li>

</ul>    

</div>

  </li>

  <li> <span class="ui-accordion-left"></span> <a href='#' class="ui-accordion-link">Accordion Panel 4 Title<span class="ui-accordion-right"></span></a>

    <div  class="ui-accordion-data">

<ul>                          

<li><input name="" type="checkbox" value="">Planet Two</li>

<li><input name="" type="checkbox" value="">Moon 1<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 2<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 3<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 4<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 5<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 6<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 7<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 8<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 9<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><font color=red> Planet One Attributes </font>

<li><input name="" type="checkbox" value="">Rings</li>

<li><input name="" type="checkbox" value="">Atmosphere<select name="">

     <option value="1">1</option>

      <option value="2">2</option>

       <option value="3">3</option>

        <option value="4">4</option>

         <option value="5">5</option>

          </select><input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Asteroid</li>

<li><input name="" type="checkbox" value="">Relief Surface</li>

<li><input name="" type="checkbox" value="">Clouds</li>

</ul>    

    </div>

  </li>

  <li> <span class="ui-accordion-left"></span> <a href='#' class="ui-accordion-link">Accordion Panel 5 Title<span class="ui-accordion-right"></span></a>

    <div  class="ui-accordion-data">

    <ul>                          

<li><input name="" type="checkbox" value="">Planet Two</li>

<li><input name="" type="checkbox" value="">Moon 1<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 2<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 3<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 4<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 5<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 6<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 7<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 8<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 9<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><font color=red> Planet One Attributes </font>

<li><input name="" type="checkbox" value="">Rings</li>

<li><input name="" type="checkbox" value="">Atmosphere<select name="">

     <option value="1">1</option>

      <option value="2">2</option>

       <option value="3">3</option>

        <option value="4">4</option>

         <option value="5">5</option>

          </select><input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Asteroid</li>

<li><input name="" type="checkbox" value="">Relief Surface</li>

<li><input name="" type="checkbox" value="">Clouds</li>

</ul>    

    </div>

  </li>

   <li> <span class="ui-accordion-left"></span> <a href='#' class="ui-accordion-link">Accordion Panel 6 Title<span class="ui-accordion-right"></span></a>

    <div  class="ui-accordion-data">

    <ul>                          

<li><input name="" type="checkbox" value="">Planet Two</li>

<li><input name="" type="checkbox" value="">Moon 1<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 2<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 3<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 4<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 5<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 6<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 7<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 8<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 9<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><font color=red> Planet One Attributes </font>

<li><input name="" type="checkbox" value="">Rings</li>

<li><input name="" type="checkbox" value="">Atmosphere<select name="">

     <option value="1">1</option>

      <option value="2">2</option>

       <option value="3">3</option>

        <option value="4">4</option>

         <option value="5">5</option>

          </select><input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Asteroid</li>

<li><input name="" type="checkbox" value="">Relief Surface</li>

<li><input name="" type="checkbox" value="">Clouds</li>

</ul>    

    </div>

  </li>

   <li> <span class="ui-accordion-left"></span> <a href='#' class="ui-accordion-link">Accordion Panel 7 Title<span class="ui-accordion-right"></span></a>

    <div  class="ui-accordion-data">

    <ul>                          

<li><input name="" type="checkbox" value="">Planet Two</li>

<li><input name="" type="checkbox" value="">Moon 1<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 2<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 3<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 4<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 5<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 6<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 7<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 8<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 9<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><font color=red> Planet One Attributes </font>

<li><input name="" type="checkbox" value="">Rings</li>

<li><input name="" type="checkbox" value="">Atmosphere<select name="">

     <option value="1">1</option>

      <option value="2">2</option>

       <option value="3">3</option>

        <option value="4">4</option>

         <option value="5">5</option>

          </select><input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Asteroid</li>

<li><input name="" type="checkbox" value="">Relief Surface</li>

<li><input name="" type="checkbox" value="">Clouds</li>

</ul>    

    </div>

  </li>

   <li> <span class="ui-accordion-left"></span> <a href='#' class="ui-accordion-link">Accordion Panel 8 Title<span class="ui-accordion-right"></span></a>

    <div  class="ui-accordion-data">

    <ul>                          

<li><input name="" type="checkbox" value="">Planet Two</li>

<li><input name="" type="checkbox" value="">Moon 1<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 2<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 3<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 4<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 5<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 6<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 7<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 8<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 9<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><font color=red> Planet One Attributes </font>

<li><input name="" type="checkbox" value="">Rings</li>

<li><input name="" type="checkbox" value="">Atmosphere<select name="">

     <option value="1">1</option>

      <option value="2">2</option>

       <option value="3">3</option>

        <option value="4">4</option>

         <option value="5">5</option>

          </select><input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Asteroid</li>

<li><input name="" type="checkbox" value="">Relief Surface</li>

<li><input name="" type="checkbox" value="">Clouds</li>

</ul>    

    </div>

  </li>

   <li> <span class="ui-accordion-left"></span> <a href='#' class="ui-accordion-link">Accordion Panel 9 Title<span class="ui-accordion-right"></span></a>

    <div  class="ui-accordion-data">

    <ul>                          

<li><input name="" type="checkbox" value="">Planet Two</li>

<li><input name="" type="checkbox" value="">Moon 1<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 2<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 3<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 4<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 5<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 6<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 7<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 8<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Moon 9<input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><font color=red> Planet One Attributes </font>

<li><input name="" type="checkbox" value="">Rings</li>

<li><input name="" type="checkbox" value="">Atmosphere<select name="">

     <option value="1">1</option>

      <option value="2">2</option>

       <option value="3">3</option>

        <option value="4">4</option>

         <option value="5">5</option>

          </select><input name="choice" type="radio" value="" /><input name="text" type="text" size=10 ></li>

<li><input name="" type="checkbox" value="">Asteroid</li>

<li><input name="" type="checkbox" value="">Relief Surface</li>

<li><input name="" type="checkbox" value="">Clouds</li>

</ul>    

    </div>

  </li>

   <li> <span class="ui-accordion-left"></span> <a href='#' class="ui-accordion-link">Accordion Panel 10 Title<span class="ui-accordion-right"></span></a>

    <div  class="ui-accordion-data">Accordion Panel 10 Content</div>

  </li>

</ul>

<script type="text/javascript">

jQuery("#jQueryUIAccordion1").accordion({ event: "click" });

</script>

<map name="colmap">

<area shape="rect" coords="1,1,7,10" href="javascript:showColor(' 0.0 1.0  0.0')">

<area shape="rect" coords="9,1,15,10" href="javascript:showColor(' 0.0 1.0  .2 ')">

<area shape="rect" coords="17,1,23,10" href="javascript:showColor(' 0.0 1.0  .4 ')">

<area shape="rect" coords="25,1,31,10" href="javascript:showColor(' 0.0 1.0  .6')">

<area shape="rect" coords=" .2 ,1,39,10" href="javascript:showColor(' 0.0 1.0  .8 ')">

<area shape="rect" coords="41,1,47,10" href="javascript:showColor(' 0.0 1.0  1.0 ')">

<area shape="rect" coords="49,1,55,10" href="javascript:showColor(' .2  1.0  0.0')">

<area shape="rect" coords="57,1,63,10" href="javascript:showColor(' .2  1.0  .2 ')">

<area shape="rect" coords="65,1,71,10" href="javascript:showColor(' .2  1.0  .4 ')">

<area shape="rect" coords="73,1,79,10" href="javascript:showColor(' .2  1.0  .6')">

<area shape="rect" coords="81,1,87,10" href="javascript:showColor(' .2  1.0  .8 ')">

<area shape="rect" coords="89,1,95,10" href="javascript:showColor(' .2  1.0  1.0 ')">

<area shape="rect" coords="97,1,103,10" href="javascript:showColor(' .4  1.0  0.0')">

<area shape="rect" coords="105,1,111,10" href="javascript:showColor(' .4  1.0  .2 ')">

<area shape="rect" coords="113,1,119,10" href="javascript:showColor(' .4  1.0  .4 ')">

<area shape="rect" coords="121,1,127,10" href="javascript:showColor(' .4  1.0  .6')">

<area shape="rect" coords="129,1,135,10" href="javascript:showColor(' .4  1.0  .8 ')">

<area shape="rect" coords="137,1,143,10" href="javascript:showColor(' .4  1.0  1.0 ')">

<area shape="rect" coords="145,1,151,10" href="javascript:showColor(' .6 1.0  0.0')">

<area shape="rect" coords="153,1,159,10" href="javascript:showColor(' .6 1.0  .2 ')">

<area shape="rect" coords="161,1,167,10" href="javascript:showColor(' .6 1.0  .4 ')">

<area shape="rect" coords="169,1,175,10" href="javascript:showColor(' .6 1.0  .6')">

<area shape="rect" coords="177,1,183,10" href="javascript:showColor(' .6 1.0  .8 ')">

<area shape="rect" coords="185,1,191,10" href="javascript:showColor(' .6 1.0  1.0 ')">

<area shape="rect" coords="193,1,1 .6,10" href="javascript:showColor(' .8  1.0  0.0')">

<area shape="rect" coords="201,1,207,10" href="javascript:showColor(' .8  1.0  .2 ')">

<area shape="rect" coords="209,1,215,10" href="javascript:showColor(' .8  1.0  .4 ')">

<area shape="rect" coords="217,1,223,10" href="javascript:showColor(' .8  1.0  .6')">

<area shape="rect" coords="225,1,231,10" href="javascript:showColor(' .8  1.0  .8 ')">

<area shape="rect" coords="2 .2 ,1,239,10" href="javascript:showColor(' .8  1.0  1.0 ')">

<area shape="rect" coords="241,1,247,10" href="javascript:showColor(' 1.0  1.0  0.0')">

<area shape="rect" coords="249,1,255,10" href="javascript:showColor(' 1.0  1.0  .2 ')">

<area shape="rect" coords="257,1,263,10" href="javascript:showColor(' 1.0  1.0  .4 ')">

<area shape="rect" coords="265,1,271,10" href="javascript:showColor(' 1.0  1.0  .6')">

<area shape="rect" coords="273,1,279,10" href="javascript:showColor(' 1.0  1.0  .8 ')">

<area shape="rect" coords="281,1,287,10" href="javascript:showColor(' 1.0  1.0  1.0 ')">

<area shape="rect" coords="1,12,7,21" href="javascript:showColor(' 0.0 .8  0.0')">

<area shape="rect" coords="9,12,15,21" href="javascript:showColor(' 0.0 .8  .2 ')">

<area shape="rect" coords="17,12,23,21" href="javascript:showColor(' 0.0 .8  .4 ')">

<area shape="rect" coords="25,12,31,21" href="javascript:showColor(' 0.0 .8  .6')">

<area shape="rect" coords=" .2 ,12,39,21" href="javascript:showColor(' 0.0 .8  .8 ')">

<area shape="rect" coords="41,12,47,21" href="javascript:showColor(' 0.0 .8  1.0 ')">

<area shape="rect" coords="49,12,55,21" href="javascript:showColor(' .2  .8  0.0')">

<area shape="rect" coords="57,12,63,21" href="javascript:showColor(' .2  .8  .2 ')">

<area shape="rect" coords="65,12,71,21" href="javascript:showColor(' .2  .8  .4 ')">

<area shape="rect" coords="73,12,79,21" href="javascript:showColor(' .2  .8  .6')">

<area shape="rect" coords="81,12,87,21" href="javascript:showColor(' .2  .8  .8 ')">

<area shape="rect" coords="89,12,95,21" href="javascript:showColor(' .2  .8  1.0 ')">

<area shape="rect" coords="97,12,103,21" href="javascript:showColor(' .4  .8  0.0')">

<area shape="rect" coords="105,12,111,21" href="javascript:showColor(' .4  .8  .2 ')">

<area shape="rect" coords="113,12,119,21" href="javascript:showColor(' .4  .8  .4 ')">

<area shape="rect" coords="121,12,127,21" href="javascript:showColor(' .4  .8  .6')">

<area shape="rect" coords="129,12,135,21" href="javascript:showColor(' .4  .8  .8 ')">

<area shape="rect" coords="137,12,143,21" href="javascript:showColor(' .4  .8  1.0 ')">

<area shape="rect" coords="145,12,151,21" href="javascript:showColor(' .6 .8  0.0')">

<area shape="rect" coords="153,12,159,21" href="javascript:showColor(' .6 .8  .2 ')">

<area shape="rect" coords="161,12,167,21" href="javascript:showColor(' .6 .8  .4 ')">

<area shape="rect" coords="169,12,175,21" href="javascript:showColor(' .6 .8  .6')">

<area shape="rect" coords="177,12,183,21" href="javascript:showColor(' .6 .8  .8 ')">

<area shape="rect" coords="185,12,191,21" href="javascript:showColor(' .6 .8  1.0 ')">

<area shape="rect" coords="193,12,1 .6,21" href="javascript:showColor(' .8  .8  0.0')">

<area shape="rect" coords="201,12,207,21" href="javascript:showColor(' .8  .8  .2 ')">

<area shape="rect" coords="209,12,215,21" href="javascript:showColor(' .8  .8  .4 ')">

<area shape="rect" coords="217,12,223,21" href="javascript:showColor(' .8  .8  .6')">

<area shape="rect" coords="225,12,231,21" href="javascript:showColor(' .8  .8  .8 ')">

<area shape="rect" coords="2 .2 ,12,239,21" href="javascript:showColor(' .8  .8  1.0 ')">

<area shape="rect" coords="241,12,247,21" href="javascript:showColor(' 1.0  .8  0.0')">

<area shape="rect" coords="249,12,255,21" href="javascript:showColor(' 1.0  .8  .2 ')">

<area shape="rect" coords="257,12,263,21" href="javascript:showColor(' 1.0  .8  .4 ')">

<area shape="rect" coords="265,12,271,21" href="javascript:showColor(' 1.0  .8  .6')">

<area shape="rect" coords="273,12,279,21" href="javascript:showColor(' 1.0  .8  .8 ')">

<area shape="rect" coords="281,12,287,21" href="javascript:showColor(' 1.0  .8  1.0 ')">

<area shape="rect" coords="1,23,7,32" href="javascript:showColor(' 0.0 .6 0.0')">

<area shape="rect" coords="9,23,15,32" href="javascript:showColor(' 0.0 .6 .2 ')">

<area shape="rect" coords="17,23,23,32" href="javascript:showColor(' 0.0 .6 .4 ')">

<area shape="rect" coords="25,23,31,32" href="javascript:showColor(' 0.0 .6 .6')">

<area shape="rect" coords=" .2 ,23,39,32" href="javascript:showColor(' 0.0 .6 .8 ')">

<area shape="rect" coords="41,23,47,32" href="javascript:showColor(' 0.0 .6 1.0 ')">

<area shape="rect" coords="49,23,55,32" href="javascript:showColor(' .2  .6 0.0')">

<area shape="rect" coords="57,23,63,32" href="javascript:showColor(' .2  .6 .2 ')">

<area shape="rect" coords="65,23,71,32" href="javascript:showColor(' .2  .6 .4 ')">

<area shape="rect" coords="73,23,79,32" href="javascript:showColor(' .2  .6 .6')">

<area shape="rect" coords="81,23,87,32" href="javascript:showColor(' .2  .6 .8 ')">

<area shape="rect" coords="89,23,95,32" href="javascript:showColor(' .2  .6 1.0 ')">

<area shape="rect" coords="97,23,103,32" href="javascript:showColor(' .4  .6 0.0')">

<area shape="rect" coords="105,23,111,32" href="javascript:showColor(' .4  .6 .2 ')">

<area shape="rect" coords="113,23,119,32" href="javascript:showColor(' .4  .6 .4 ')">

<area shape="rect" coords="121,23,127,32" href="javascript:showColor(' .4  .6 .6')">

<area shape="rect" coords="129,23,135,32" href="javascript:showColor(' .4  .6 .8 ')">

<area shape="rect" coords="137,23,143,32" href="javascript:showColor(' .4  .6 1.0 ')">

<area shape="rect" coords="145,23,151,32" href="javascript:showColor(' .6 .6 0.0')">

<area shape="rect" coords="153,23,159,32" href="javascript:showColor(' .6 .6 .2 ')">

<area shape="rect" coords="161,23,167,32" href="javascript:showColor(' .6 .6 .4 ')">

<area shape="rect" coords="169,23,175,32" href="javascript:showColor(' .6 .6 .6')">

<area shape="rect" coords="177,23,183,32" href="javascript:showColor(' .6 .6 .8 ')">

<area shape="rect" coords="185,23,191,32" href="javascript:showColor(' .6 .6 1.0 ')">

<area shape="rect" coords="193,23,1 .6,32" href="javascript:showColor(' .8  .6 0.0')">

<area shape="rect" coords="201,23,207,32" href="javascript:showColor(' .8  .6 .2 ')">

<area shape="rect" coords="209,23,215,32" href="javascript:showColor(' .8  .6 .4 ')">

<area shape="rect" coords="217,23,223,32" href="javascript:showColor(' .8  .6 .6')">

<area shape="rect" coords="225,23,231,32" href="javascript:showColor(' .8  .6 .8 ')">

<area shape="rect" coords="2 .2 ,23,239,32" href="javascript:showColor(' .8  .6 1.0 ')">

<area shape="rect" coords="241,23,247,32" href="javascript:showColor(' 1.0  .6 0.0')">

<area shape="rect" coords="249,23,255,32" href="javascript:showColor(' 1.0  .6 .2 ')">

<area shape="rect" coords="257,23,263,32" href="javascript:showColor(' 1.0  .6 .4 ')">

<area shape="rect" coords="265,23,271,32" href="javascript:showColor(' 1.0  .6 .6')">

<area shape="rect" coords="273,23,279,32" href="javascript:showColor(' 1.0  .6 .8 ')">

<area shape="rect" coords="281,23,287,32" href="javascript:showColor(' 1.0  .6 1.0 ')">

<area shape="rect" coords="1,34,7,43" href="javascript:showColor(' 0.0 .4  0.0')">

<area shape="rect" coords="9,34,15,43" href="javascript:showColor(' 0.0 .4  .2 ')">

<area shape="rect" coords="17,34,23,43" href="javascript:showColor(' 0.0 .4  .4 ')">

<area shape="rect" coords="25,34,31,43" href="javascript:showColor(' 0.0 .4  .6')">

<area shape="rect" coords=" .2 ,34,39,43" href="javascript:showColor(' 0.0 .4  .8 ')">

<area shape="rect" coords="41,34,47,43" href="javascript:showColor(' 0.0 .4  1.0 ')">

<area shape="rect" coords="49,34,55,43" href="javascript:showColor(' .2  .4  0.0')">

<area shape="rect" coords="57,34,63,43" href="javascript:showColor(' .2  .4  .2 ')">

<area shape="rect" coords="65,34,71,43" href="javascript:showColor(' .2  .4  .4 ')">

<area shape="rect" coords="73,34,79,43" href="javascript:showColor(' .2  .4  .6')">

<area shape="rect" coords="81,34,87,43" href="javascript:showColor(' .2  .4  .8 ')">

<area shape="rect" coords="89,34,95,43" href="javascript:showColor(' .2  .4  1.0 ')">

<area shape="rect" coords="97,34,103,43" href="javascript:showColor(' .4  .4  0.0')">

<area shape="rect" coords="105,34,111,43" href="javascript:showColor(' .4  .4  .2 ')">

<area shape="rect" coords="113,34,119,43" href="javascript:showColor(' .4  .4  .4 ')">

<area shape="rect" coords="121,34,127,43" href="javascript:showColor(' .4  .4  .6')">

<area shape="rect" coords="129,34,135,43" href="javascript:showColor(' .4  .4  .8 ')">

<area shape="rect" coords="137,34,143,43" href="javascript:showColor(' .4  .4  1.0 ')">

<area shape="rect" coords="145,34,151,43" href="javascript:showColor(' .6 .4  0.0')">

<area shape="rect" coords="153,34,159,43" href="javascript:showColor(' .6 .4  .2 ')">

<area shape="rect" coords="161,34,167,43" href="javascript:showColor(' .6 .4  .4 ')">

<area shape="rect" coords="169,34,175,43" href="javascript:showColor(' .6 .4  .6')">

<area shape="rect" coords="177,34,183,43" href="javascript:showColor(' .6 .4  .8 ')">

<area shape="rect" coords="185,34,191,43" href="javascript:showColor(' .6 .4  1.0 ')">

<area shape="rect" coords="193,34,1 .6,43" href="javascript:showColor(' .8  .4  0.0')">

<area shape="rect" coords="201,34,207,43" href="javascript:showColor(' .8  .4  .2 ')">

<area shape="rect" coords="209,34,215,43" href="javascript:showColor(' .8  .4  .4 ')">

<area shape="rect" coords="217,34,223,43" href="javascript:showColor(' .8  .4  .6')">

<area shape="rect" coords="225,34,231,43" href="javascript:showColor(' .8  .4  .8 ')">

<area shape="rect" coords="2 .2 ,34,239,43" href="javascript:showColor(' .8  .4  1.0 ')">

<area shape="rect" coords="241,34,247,43" href="javascript:showColor(' 1.0  .4  0.0')">

<area shape="rect" coords="249,34,255,43" href="javascript:showColor(' 1.0  .4  .2 ')">

<area shape="rect" coords="257,34,263,43" href="javascript:showColor(' 1.0  .4  .4 ')">

<area shape="rect" coords="265,34,271,43" href="javascript:showColor(' 1.0  .4  .6')">

<area shape="rect" coords="273,34,279,43" href="javascript:showColor(' 1.0  .4  .8 ')">

<area shape="rect" coords="281,34,287,43" href="javascript:showColor(' 1.0  .4  1.0 ')">

<area shape="rect" coords="1,45,7,54" href="javascript:showColor(' 0.0 .2  0.0')">

<area shape="rect" coords="9,45,15,54" href="javascript:showColor(' 0.0 .2 .318 ')">

<area shape="rect" coords="17,45,23,54" href="javascript:showColor(' 0.0 .2  .4 ')">

<area shape="rect" coords="25,45,31,54" href="javascript:showColor(' 0.0 .2  .6')">

<area shape="rect" coords=" .2 ,45,39,54" href="javascript:showColor(' 0.0 .2  .8 ')">

<area shape="rect" coords="41,45,47,54" href="javascript:showColor(' 0.0 .2  1.0 ')">

<area shape="rect" coords="49,45,55,54" href="javascript:showColor(' .2 .318  0.0')">

<area shape="rect" coords="57,45,63,54" href="javascript:showColor(' .2 .318 .2 ')">

<area shape="rect" coords="65,45,71,54" href="javascript:showColor(' .2 .318  .4 ')">

<area shape="rect" coords="73,45,79,54" href="javascript:showColor(' .2 .318  .6')">

<area shape="rect" coords="81,45,87,54" href="javascript:showColor(' .2 .318  .8 ')">

<area shape="rect" coords="89,45,95,54" href="javascript:showColor(' .2 .318  1.0 ')">

<area shape="rect" coords="97,45,103,54" href="javascript:showColor(' .4  .2  0.0')">

<area shape="rect" coords="105,45,111,54" href="javascript:showColor(' .4  .2 .318 ')">

<area shape="rect" coords="113,45,119,54" href="javascript:showColor(' .4  .2  .4 ')">

<area shape="rect" coords="121,45,127,54" href="javascript:showColor(' .4  .2  .6')">

<area shape="rect" coords="129,45,135,54" href="javascript:showColor(' .4  .2  .8 ')">

<area shape="rect" coords="137,45,143,54" href="javascript:showColor(' .4  .2  1.0 ')">

<area shape="rect" coords="145,45,151,54" href="javascript:showColor(' .6 .2  0.0')">

<area shape="rect" coords="153,45,159,54" href="javascript:showColor(' .6 .2 .318 ')">

<area shape="rect" coords="161,45,167,54" href="javascript:showColor(' .6 .2  .4 ')">

<area shape="rect" coords="169,45,175,54" href="javascript:showColor(' .6 .2  .6')">

<area shape="rect" coords="177,45,183,54" href="javascript:showColor(' .6 .2  .8 ')">

<area shape="rect" coords="185,45,191,54" href="javascript:showColor(' .6 .2  1.0 ')">

<area shape="rect" coords="193,45,1 .6,54" href="javascript:showColor(' .8  .2  0.0')">

<area shape="rect" coords="201,45,207,54" href="javascript:showColor(' .8  .2 .318 ')">

<area shape="rect" coords="209,45,215,54" href="javascript:showColor(' .8  .2  .4 ')">

<area shape="rect" coords="217,45,223,54" href="javascript:showColor(' .8  .2  .6')">

<area shape="rect" coords="225,45,231,54" href="javascript:showColor(' .8  .2  .8 ')">

<area shape="rect" coords="2 .2 ,45,239,54" href="javascript:showColor(' .8  .2  1.0 ')">

<area shape="rect" coords="241,45,247,54" href="javascript:showColor(' 1.0  .2  0.0')">

<area shape="rect" coords="249,45,255,54" href="javascript:showColor(' 1.0  .2 .318 ')">

<area shape="rect" coords="257,45,263,54" href="javascript:showColor(' 1.0  .2  .4 ')">

<area shape="rect" coords="265,45,271,54" href="javascript:showColor(' 1.0  .2  .6')">

<area shape="rect" coords="273,45,279,54" href="javascript:showColor(' 1.0  .2  .8 ')">

<area shape="rect" coords="281,45,287,54" href="javascript:showColor(' 1.0  .2  1.0 ')">

<area shape="rect" coords="1,56,7,65" href="javascript:showColor(' 0.0 0.0 0.0')">

<area shape="rect" coords="9,56,15,65" href="javascript:showColor(' 0.0 0.0 .2 ')">

<area shape="rect" coords="17,56,23,65" href="javascript:showColor(' 0.0 0.0 .4 ')">

<area shape="rect" coords="25,56,31,65" href="javascript:showColor(' 0.0 0.0 .6')">

<area shape="rect" coords=" .2 ,56,39,65" href="javascript:showColor(' 0.0 0.0 .8 ')">

<area shape="rect" coords="41,56,47,65" href="javascript:showColor(' 0.0 0.0 1.0 ')">

<area shape="rect" coords="49,56,55,65" href="javascript:showColor(' .2  0.0 0.0')">

<area shape="rect" coords="57,56,63,65" href="javascript:showColor(' .2  0.0 .2 ')">

<area shape="rect" coords="65,56,71,65" href="javascript:showColor(' .2  0.0 .4 ')">

<area shape="rect" coords="73,56,79,65" href="javascript:showColor(' .2  0.0 .6')">

<area shape="rect" coords="81,56,87,65" href="javascript:showColor(' .2  0.0 .8 ')">

<area shape="rect" coords="89,56,95,65" href="javascript:showColor(' .2  0.0 1.0 ')">

<area shape="rect" coords="97,56,103,65" href="javascript:showColor(' .4  0.0 0.0')">

<area shape="rect" coords="105,56,111,65" href="javascript:showColor(' .4  0.0 .2 ')">

<area shape="rect" coords="113,56,119,65" href="javascript:showColor(' .4  0.0 .4 ')">

<area shape="rect" coords="121,56,127,65" href="javascript:showColor(' .4  0.0 .6')">

<area shape="rect" coords="129,56,135,65" href="javascript:showColor(' .4  0.0 .8 ')">

<area shape="rect" coords="137,56,143,65" href="javascript:showColor(' .4  0.0 1.0 ')">

<area shape="rect" coords="145,56,151,65" href="javascript:showColor(' .6 0.0 0.0')">

<area shape="rect" coords="153,56,159,65" href="javascript:showColor(' .6 0.0 .2 ')">

<area shape="rect" coords="161,56,167,65" href="javascript:showColor(' .6 0.0 .4 ')">

<area shape="rect" coords="169,56,175,65" href="javascript:showColor(' .6 0.0 .6')">

<area shape="rect" coords="177,56,183,65" href="javascript:showColor(' .6 0.0 .8 ')">

<area shape="rect" coords="185,56,191,65" href="javascript:showColor(' .6 0.0 1.0 ')">

<area shape="rect" coords="193,56,1 .6,65" href="javascript:showColor(' .8  0.0 0.0')">

<area shape="rect" coords="201,56,207,65" href="javascript:showColor(' .8  0.0 .2 ')">

<area shape="rect" coords="209,56,215,65" href="javascript:showColor(' .8  0.0 .4 ')">

<area shape="rect" coords="217,56,223,65" href="javascript:showColor(' .8  0.0 .6')">

<area shape="rect" coords="225,56,231,65" href="javascript:showColor(' .8  0.0 .8 ')">

<area shape="rect" coords="2 .2 ,56,239,65" href="javascript:showColor(' .8  0.0 1.0 ')">

<area shape="rect" coords="241,56,247,65" href="javascript:showColor(' 1.0  0.0 0.0')">

<area shape="rect" coords="249,56,255,65" href="javascript:showColor(' 1.0  0.0 .2 ')">

<area shape="rect" coords="257,56,263,65" href="javascript:showColor(' 1.0  0.0 .4 ')">

<area shape="rect" coords="265,56,271,65" href="javascript:showColor(' 1.0  0.0 .6')">

<area shape="rect" coords="273,56,279,65" href="javascript:showColor(' 1.0  0.0 .8 ')">

<area shape="rect" coords="281,56,287,65" href="javascript:showColor(' 1.0 0.0 1.0 ')">

</map>

        

 <div class="ta1" style="position: absolute; bottom: -70px; left: 0px">

        <a><img usemap="#colmap" src="colortable.gif" border=0 width=289 height=67></a>

  </div>           

            

            

            

            

            

            

            

          </form>

		</div>

		

	
 

	</div>

    

	

	

  <div class="ta1" style="position: absolute; top: 30px; left: 320px">

	<form method="post" action="">

	  <textarea name="html" id="html" cols="100" rows="5">

      </textarea>

	</form>

</div>
 

<script type="text/javascript" src="smarkup.js"></script>

<script type="text/javascript" src="conf.js"></script>

<script type="text/javascript">

	SMarkUp.bind(

		'html', //textarea id 

		'html', //makup configuration name 

		530		//height of textarea

	);

</script>

<script type="text/javascript">

	var remove = document.getElementById('remove');

	remove.onclick = function() {

		if (this.rel == 'on') {

			this.innerHTML = 'Return SmartMarkUP Back';

			this.rel = 'off';

			var textarea = SMarkUp.getInstance('html');

			textarea.remove();

		} else {

			this.innerHTML = 'Remove SmartMarkUP';

			this.rel = 'on';

			SMarkUp.bind(

				'html', //textarea id 

				'html', //makup configuration name 

				600		//height of textarea

			);

		}

		return false;

	}

</script>

 

</body>

</html>

Open in new window

0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now