Code for the Actual JavaScript Code and Color Selectors : Color « Development « JavaScript DHTML






Code for the Actual JavaScript Code and Color Selectors

<html>
<head>
  <title>Color Definition</title>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
    var graf = '<body>';
    graf += '<h2><em>header 2</em></h2>';
    graf += '<p>text</p>';
    graf += '<p>a sample link: <a href="http://www.java2s.com">www.java2s.com</a></p>';
    graf += '</body>'
   
    function refreshMain() {
      var newColor = document.form1.colorList.options[document.form1.colorList.selectedIndex].text
      var selProp = null
   
      with(parent.main.document){
        open();
        write(graf);
        if(document.form1.type[0].checked){
          bgColor = newColor
        }else{
          if(document.form1.type[1].checked){
            fgColor = newColor;
          }else{
            if(document.form1.type[2].checked){
              alinkColor = newColor;
            }else{
              if(document.form1.type[3].checked){
                linkColor = newColor;
              }else if (document.form1.type[4].checked){
                vlinkColor = newColor;
              }
            }
          }
        }
      }
      close()
    }
  //-->
  </script>
</head>
   
<body bgcolor="tomato">
  <form name="form1">
    <p>
      Select Color:
      <select name="colorList" size="1">
        <option>black</option>
        <option>blue</option>
        <option>brown</option>
        <option>cyan</option>
        <option>gold</option>
        <option>gray</option>
        <option>green</option>        
        <option>indigo</option>
        <option>lavender</option>
        <option>lime</option>
        <option>maroon</option>
        <option>navy</option>
        <option>olive</option>
        <option>orange</option>
        <option>pink</option>
        <option>purple</option>
        <option>red</option>
        <option>royalblue</option>
        <option>silver</option>
        <option>slategray</option>
        <option>tan</option>
        <option>teal</option>
        <option>turquoise</option>
        <option>violet</option>
        <option>white</option>
        <option>yellow</option>
      </select>
      <br>
      <input type="radio" name="type" value="bgColor" checked>Background</input>
      <input type="radio" name="type" value="fgColor">Foreground</input>
      <input type="radio" name="type" value="alinkColor">Activated Link</input>
      <input type="radio" name="type" value="linkColor">Unvisted Link</input>
      <input type="radio" name="type" value="vlinkColor">Visited Link</input>
      <br>
      <input type="button" name="Apply" value="Apply" onclick="refreshMain()">
    </p>
  </form>
</body>
</html>

           
       








Related examples in the same category

1. Using Colors in JavaScript
2.Using Color Attributes: how document colors can be changed
3.Using setInterval () to Repeatedly Change the Document Background Color
4.Color Sampler