JavaScript Instant Background Color Drop Down List

This will allow the user to change the background color of your page. Works in both Netscape(Firefox) and IE. Allow users to change the background color of their favorite when they visit your website.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

Insert this code into <body> tags

<center>
    <form>
      <font face="verdana, arial"><strong>Choose a background color:</strong></font> <select name=
      "ccGround" size="1" onchange=
      "(document.bgColor=ccGround.options[ccGround.selectedIndex].value)">
        <option value="408080" target="1" selected="selected">
          Cool Green
        </option>

        <option value="C0C0C0" target="1">
          Cool Grey
        </option>

        <option value="000000" target="1">
          Black
        </option>

        <option value="730200" target="1">
          DarkRed
        </option>

        <option value="231800" target="1">
          Brown
        </option>

        <option value="044302" target="1">
          DarkGreen
        </option>

        <option value="0D09A3" target="1">
          Dark Blue
        </option>

        <option value="808040" target="1">
          Avocado
        </option>

        <option value="800080" target="1">
          Purple
        </option>

        <option value="444444" target="1">
          Gray
        </option>

        <option value="FF0400" target="1">
          Red
        </option>

        <option value="EFE800" target="1">
          Yellow
        </option>

        <option value="05EF00" target="1">
          Green
        </option>

        <option value="0206FF" target="1">
          Blue
        </option>

        <option value="AE08EF" target="1">
          Violet
        </option>

        <option value="FF8C8A" target="1">
          Mauve
        </option>

        <option value="FF80FF" target="1">
          Pink
        </option>

        <option value="FFCCCC" target="1">
          Peach
        </option>

        <option value="FFCC99" target="1">
          Orange
        </option>

        <option value="000080" target="1">
          Darker Blue
        </option>

        <option value="808080" target="1">
          Dark Grey
        </option>

        <option value="D5CCBB" target="1">
          Tan
        </option>

        <option value="DDDDDD" target="1">
          LightGray
        </option>

        <option value="FBFF73" target="1">
          Light Yellow
        </option>

        <option value="7CFF7D" target="1">
          LightGreen
        </option>

        <option value="A6BEFF" target="1">
          Light Blue
        </option>

        <option value="FFFFFF" target="1">
          White
        </option>
      </select>
    </form>
  </center>

Instruction:

Change the following text:

Choose a background color: = button text which you like.

To add new color:

Add the following code before </select> tags:

<option value="COLOR VALUE" target="1">
Color Description
</option>

You can add as many as you like.

Webmaster » Web Programming » JavaScript » Background Effects » Instant Background Color Drop Down List

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links