Topic: How to jump menu select a new style to same webpage

Like mentioned in the title,

How can you select from a jump menu a new style to the page, or more directly, to a div id named=Block6. I wish to change between the background color from red to green and visa versa. At the same time, how can this jump menu selection hide some layers and deselect the other layers? Thanks!

dulci: Welcome. You could achieve this with a bit of JavaScript.

Stylesheet switching:

How do I change stylesheets dynamically?

if you want some things to appear in some styles but not in others just set their style to display: none in your stylesheet.

See this:

How do I toggle the visibility of layers?

And as you are new here see:
http://faq.ozoneasylum.com/394/

___________________
Emps

FAQs: Emperor

Great , the css switching and visibility is working now. But it can only be happened once and no more!
I.e. cos the select box (with style 1 and style 2) only has one onChange=... After that, it will not change back because it will always use e.g. from style 1 to 'written style' and style 2 to 'same written style'.

How can i give each style/link its own actions?

Code:

<div id="Block1"> Choose a style:
<select name="Meny" onChange="MM_jumpMenu('parent',this,0);MM_changeProp('Block6','','style.backgroundColor','#009900','DIV')">
<option value="#" selected>Stil 1</option>
<option value="#">Stil 2</option>
</select>
</div>

I'm writing this quick at work, so I don't have time to write code, but basically you want your onchange to call a function.
That function will then check which of your two options are selected and then alter your styles appropriately.

You can find which option is selected with:
document.formID.selectID.optionID.selected
or
document.getElementbyId('optionID').selected
or
some other way that Slime, Bugs or some other DOM genius can tell you about...

A simple if...then...else statement ought to do you just fine.

dulci: I'd try something like:

<form action="javascript:changeStyle(document.FORM.SELECT.options[document.FORM.SELECT.selectedIndex].value); return false;"

or something like that.

___________________
Emps

FAQs: Emperor