Hello. I'm trying to create drop-down menus that will allow the user to choose from different style elements to be applied to the page. The idea is that they can select the background-color from one menu, and on another menu they can select the font color, and these style choices will be applied to the page instantly. What I have so far is this: <head>
<style>
body {
background-color:#cccccc;
color:#000000;
}
body.aaa {
background-color:#000000;
}
body.bbb {
background-color:#ff0000;
}
body.ccc {
color:#ffffff;
}
body.ddd {
color:#ff00ff;
}
</style>
<head>
So here I have my classes set up. Now I want to create drop-down menus to allow the user to select from either "www" or "#*$!", and from either "yyy" or "zzz". I really don't know how to do this at all. What I tried was this (and feel free to laugh):
<select>
<option selected="selected">CHOOSE BACKGROUND COLOR</option>
<option value="aaa">BLACK</option>
<option value="bbb">RED</option>
</select>
<select>
<option selected="selected">CHOOSE FONT COLOR</option>
<option value="ccc">WHITE</option>
<option value="ddd">PURPLE</option>
</select>
Obviously I'm just feeling around in the dark here, but you can probably see where I'm going with this...
What I don't understand is how to make the user's selection actually affect the page. Is it some kind of "Onclick" thing? How do I make it so that the users selection actually affects the page in real time?
It seems like it would be something simple, but I haven't found it yet. Any help would be greatly appreciated - thanks!
Thanks,
Phil
