[Resolvido] Varios Botões com temas

[-=Felipe=- 0]

Meu colega tem um site e me pidiu pra fazer um script pra ele odne tem alguns botões e quando clcia em cada botão o tema do site muda, muda pra pascoa, natal, halloween, carnaval...

Eu fiz esse script:

 

<input type="button" value="Fundo Normal" onclick="document.body.background='bg_Xmas09_pattern_v1.gif'">
<br><br>
<input type="button" value="Tema Pascoa" onclick="document.body.background=' http://elianagifs.zip.net/images/fundo1_pascoa.jpg '">
<br><br>
<input type="button" value="Tema Carnaval" onclick="document.body.background='http://img3.imageshack.us/img3/9895/conserhb5.gif'">
<br><br>
<input type="button" value="Tema Halhoween" onclick="document.body.background='halloween/creepy-halloween.jpg'">
<br><br>
<input type="button" value="Tema Natal" onclick="document.body.background='http://www.fotosdahora.com.br/gifs_animados/gifs/09Paisagens//neve_caindo.gif'">

Varios botões quando você clica eles mudam o fundo sdo site.

Porem eu tentei melhorar colocando apenas 2 botões

O botão Normal. E o botão Temas, quando você clica no botão temas abri os oturos botões. É ai que esta o problema quando clico no botão tema so abri 1 botão eu quero que abra todos os outros.

 

<input type="button" value="Normal" onclick="document.body.background='bg_Xmas09_pattern_v1.gif'">
<br>
<input type="button" id="bt" value="Temas" onclick="mostra()" />
<br>
<input type="button" id="temas" style="display:none" value="Pascoa" 

onclick="document.body.background=' Imagem de Pascoa '">
<br>
<input type="button" id="temas" style="display:none" value="Carnaval" 

onclick="document.body.background=' Imagem de Carnaval '">
<br>
<input type="button" id="temas" style="display:none" value="Halhoween" 

onclick="document.body.background=' Imagem de Halloween '">
<br>
<input type="button" id="temas" style="display:none" value="Natal" 

onclick="document.body.background=' Imagem de Natal '">

<script>
function mostra() {

    if (document.getElementById('temas').style.display == "") {
        document.getElementById('temas').style.display = "none";
    document.getElementById('bt').value = "Temas";

}else {
        document.getElementById('temas').style.display = "";
        document.getElementById('bt').value = "Esconder";
    }
    

}
</script>

[Holt 1]

Id só serve para uma coisa...

Você só pode dar o um certo ID a um objeto...

Terias que fazer algo do tipo getelementsbyclass...

Mas em vez disso passe uma div em torno dos botões "imagem natal"...

e mude o display dessa.

[-=Felipe=- 0]

É eu sei que o ID so podi ser atribuido a um objeto, mais era apenas pra saber se tinha otura forma de fazer isso.

[Holt 1]

Conseguiu usando div?

[-=Felipe=- 0]

na verdade eu não entendi como é pra mim fazer

[Holt 1]

Você deve em vez de mudar o display da id dos botões...

Mudar o display do id de uma div que fique em volta dos botões...

 

<input type="button" value="Normal" onclick="document.body.background='bg_Xmas09_pattern_v1.gif'">
<br>
<input type="button" id="bt" value="Temas" onclick="mostra()" />
<br>



<div id="divum">




<input type="button" id="temas" style="display:none" value="Pascoa" 

onclick="document.body.background=' Imagem de Pascoa '">
<br>
<input type="button" id="temas" style="display:none" value="Carnaval" 

onclick="document.body.background=' Imagem de Carnaval '">
<br>
<input type="button" id="temas" style="display:none" value="Halhoween" 

onclick="document.body.background=' Imagem de Halloween '">
<br>
<input type="button" id="temas" style="display:none" value="Natal" 

onclick="document.body.background=' Imagem de Natal '">



</div>



<script>
function mostra() {

    if (document.getElementById('divum').style.display == "") {
        document.getElementById('divum').style.display = "none";
    document.getElementById('bt').value = "Temas";

}else {
        document.getElementById('temas').style.display = "";
        document.getElementById('bt').value = "Esconder";
    }
    

}
</script>

[-=Felipe=- 0]

Entendi...

Consegui aki

 

<input type="button" value="Normal" onclick="document.body.background='bg_Xmas09_pattern_v1.gif'">
<br>
<input type="button" id="bt" value="Temas" onclick="mostra()" />
<br>

<div id="temas" style="display:none">
<input type="button" value="Pascoa" onclick="document.body.background=' Imagem de Pascoa '">
<br>
<input type="button" value="Carnaval" onclick="document.body.background=' Imagem de Carnaval '">
<br>
<input type="button" value="Halhoween" onclick="document.body.background=' Imagem de Halloween '">
<br>
<input type="button" value="Natal" onclick="document.body.background=' Imagem de Natal '">
</div>

<script>
function mostra() {

    if (document.getElementById('temas').style.display == "") {
        document.getElementById('temas').style.display = "none";
    document.getElementById('bt').value = "Temas";

}else {
        document.getElementById('temas').style.display = "";
        document.getElementById('bt').value = "Esconder";
    }
    

}
</script>

Vlw pela ajuda !!!