How to allow a user to choose their background color

Updated: 05/21/2018 by Computer Hope

Using the code below allows visitors to hover their mouse pointer over any of the letters in "Choose your background" to change the colors of the web page's background.

<center>
<a href="" onmouseover="document.bgColor='turquoise'">C</a>
<a href="" onmouseover="document.bgColor='pink'">h</a>
<a href="" onmouseover="document.bgColor='blue'">o</a>
<a href="" onmouseover="document.bgColor='red'">o</a>
<a href="" onmouseover="document.bgColor='yellow'">s</a>
<a href="" onmouseover="document.bgColor='green'">e</a>
<a href="" onmouseover="document.bgColor='white'">your</a>
<a href="" onmouseover="document.bgColor='green'">o</a>
<a href="" onmouseover="document.bgColor='seagreen'">w</a>
<a href="" onmouseover="document.bgColor='magenta'">n</a>
<a href="" onmouseover="document.bgColor='fusia'">b</a>
<a href="" onmouseover="document.bgColor='purple'">a</a>
<a href="" onmouseover="document.bgColor='navy'">c</a>
<a href="" onmouseover="document.bgColor='royalblue'">k</a>
<a href="" onmouseover="document.bgColor='Skyblue'">g</a>
<a href="" onmouseover="document.bgColor='brown'">r</a>
<a href="" onmouseover="document.bgColor='almond'">o</a>
<a href="" onmouseover="document.bgColor='coral'">u</a>
<a href="" onmouseover="document.bgColor='olivedrab'">n</a>
<a href="" onmouseover="document.bgColor='teal'">d</a>
<a href="" onmouseover="document.bgColor='black'">color!</a>
</center>
Note

If you place the above code on any page that uses CSS (Cascading Style Sheets) to define its background, this code will not work.