Jump to content

Recommended Posts

Posted

Boas pessoal, estou com a seguinte dúvida, estou a fazer um pequeno site pedido para aula e eu queria fazer (eu não sei como lhe chamar) tipo um menu de selecção de cores, e quando se pressiona-se uma, o background do site mudava para essa cor seleccionada.. Por exemplo, neste site, temos em cima a opção para mudar o background, mas o que eu queria é muito mais simples, é tipo 4 quadradinhos pequenos alinhados, cada um com uma cor, e quando se clicasse, mudava a cor..

As minhas dúvidas são as seguintes..

-Os quadrados, devo fazer uma imagem para cada um, ou então uso botões e depois modifico-os com css? (eu não tenho a certeza se dá para usar css até esse ponto em botões)

-Neste caso, é mais pratico/usar usar Javascript ou php? Ou nenhuma destas opções 😄 ? Eu estava a pensar fazer uma função em JS e chama-la na img ou botão, estou correcto?

Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.

Posted

1. Sim, dá para criares botões com transparência e aplicar qualquer cor;

2. Javascript

Obrigado 🙂

Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.

Posted

Antes demais desculpem pelo double post, é o que dá não tentar logo a solução..

Porque é que este código não funciona, não percebo..

<html>
<body>
 <script>
  function changeBG(color)
  {
   document.body.style.background = color;
  }
 </script>
 <button type="button" onclick="changeBG(#FF0000)">Red</button>
</body>
</html>

Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.

Posted

Podes criar os próprios botões em css e não precisas de uma img para isto (ganhas em tempo de carregamento de página).

Se por exemplo quiseres quadrados usas:

#divquadrado1    {
width: 10px;
height: 10px;
background: blue;
 }

Ou então um circulo:

#divcirculo   {
width: 10px;
height: 10px;
background: blue;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
	    }

depois no Javascript eu faria assim:

<script="Javascript">
function mudaBG(cor){
document.bgColor = color;
}
</script>

e finalmente para os links:

<a href="#" onclick="javascript:mudaBG('#000099')">Azul</a>

Desculpa lá se tiver algum erro, sou só aprendiz. Mas olha, se não te resolver, que ao menos te ajude a pensar! 🙂

"Que inquieto desejo vos tortura, Seres elementares, força obscura? Em volta de que ideia gravitais?" >> Anthero de Quental

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Linuxando.com | ...

Posted

Olá a todos,

O inicio da tag nao deveria ser

<script type="text/javascript"

Em vêz de:

<script="Javascript">

Ou é indiferente? Desculpem a ignorância :S, mas se possivel gostava de saber :O. Sou iniciante em javascript e quando estive na escola só falei em html, css e php mas nao sou grande especialista ainda em programação web e passado 1 ano após ter acabado o curso decidi voltar a dedicar-me a programação uma vêz que tou a esquecer o que aprendi e como não queria esquecer voltei a mexer em programação web porque é a que eu mais gosto 🙂 e agora estou a aprender javascript daí a minha observação à tag.

Cumps,

fteixeira1993

Posted

Olá @polska, vê se é isto que pretendes:

No 10ºano, quando iniciei HTML, fiz algo do género.

<HTML>
<HEAD>
<TITLE> Teste de Cores </TITLE>
</HEAD>
<BODY>
<form name="Teste">
<input type="button" name="bt1" value="Fundo Azul" onclick=" window.document.bgColor='blue'; window.document.fgColor='red'" > <br>
<input type="button" name="bt2" value="Fundo Preto" onclick=" window.document.bgColor='black'; window.document.fgColor='write'"> <br>
<input type="button" name="bt3" value="Fundo Amarelo" onclick=" window.document.bgColor='yellow'; window.document.fgColor='black'"> <br>
</form>
<font size="10" <b><i> Teste de cores do texto digitado </i></b> </font>
</BODY>
</HTML>

Estranha forma de vida que tem a capacidade de transformar comandos em mensagens de erro.

ndsotware.org

Posted (edited)

@Happy, era mesmo isso, obrigado 😄

@Virneto, eu tinha pensado mesmo em fazer os quadrados ou circulos como botão, mas como div também não está mal pensado 😄 , obrigado pela resposta

@fteixeira1933, quando escrevi aquele código apenas para teste, por acaso também me surgiu essa dúvida na declaração do script, mas como sabia que funcionava assim e era apenas para teste como disse, acabei por não colocar, de qualquer das maneiras também já fiquei esclarecido 😉

@Nuno, sim, eu quero mudar o fundo ao clicar num botão ou div, mas não queria fazer isso da maneira que tens no código, queria mesmo criar uma função em js ou php e depois chama-la no código html, é apenas isso que difere para o teu código 👍

Edited by polska

Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.

Posted (edited)

Pessoal, estava aqui a implementar as divs que funcionam para mudar a cor do bg mas a cor não está a mudar.. Eu tenho este código:

<body>

   <script type="text/javascript">
       function mudaBG(cor){
           document.bgColor = color;
       }
   </script>

      <div id="wrapper">
           <div id="logo"></div>
           <div id="topMenu">
               <div id="menu">
                   <ul>
                       <li><a href="">Home</a></li>
                       <li><a href="">Subscreva o Jornal</a></li>
                       <li><a href="">Localização</a></li>
                       <li><a href="">Contacto</a></li>
                   </ul>
               </div>
               <div id="colorPicker">
                   <div class="cinza" onclick="mudaBG('#BD1558')"></div>
               </div>
           </div>
           <div id="postingArea"></div>
           <div id="sidebar"></div>
           <div id="footer"></div>
       </div>
</body>
Edited by polska

Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.

Posted

antes do mais, deverias meter as tags script dentro do <head> ou num ficheiro à parte

segundo:

       function mudaBG(cor){
           document.bgColor = color; // "color" ? de onde isso vem ? não será "cor" ?
       }

OMG ... isto é falta de concentração!

isso vem da outra função, a que corrigiste no inicio deste post.. Como não funcionou troquei-a, esqueci-me completamente disso.. Enfim, obrigado mais uma vez Happy! 😄

Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.

Posted (edited)

Ah!

Agora venho com um erro que não é distracção minha, simplesmente não funciona, não percebo porquê...

<script type="text/javascript">
       function mudaBG(cor){
           document.bgColor = cor;
       }
   </script>


       <div id="colorPicker">
           <div id="cinza" class="cinza delta" onclick="mudaBG('#F2F2F2')"></div>
           <div id="azul" class="blue delta" onclick="mudaBG('#1FB7F2')"></div>
           <div id="laranja" class="orange delta" onclick="mudaBG('#F89527')"></div>
           <div id="branco" class="white delta" onclick="mudaBG('#FFF')"></div>
           <div id="verde" class="green delta" onclick="mudaBG('#5BCF51')"></div>
       </div>

Tem mais código entre o script e as div's mas eu só copiei isso, o essencial.. Eu testei num ficheiro a parte, 5 divs a usar esse script e funcionou, mas não percebo porque não funciona agora no site.. As alterações que fiz foi adicionar as classes com o respectivo nome da cor para atribuir a cor à div , e a classe delta que faz apenas float:left , para elas alinharem umas a seguir as outras. E formatei as divs claro, no #colorPicker{}, border radius, width, etc...

Edited by polska

Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.

Posted (edited)

tirando o pormenor de que javascript está escrito como está (fruto do editor do forum, presumo) o código apresentado está correcto.

tens de dar mais informação sobre o problema:

- código

- mensagem de erro do javascript

Não apresenta erro nenhum o script ..

Eu vou colocar o código

<body>

   <script type="text/javascript">
       function mudaBG(cor){
           document.bgColor = cor;
       }
   </script>

      <div id="wrapper">
           <div id="logo">
               <a href="index.html"><img src="imagens/logo.png" alt="Jornal Nacional Logo" /></a>
     </div>
           <div id="topMenu">
               <div id="menu">
                   <ul>
                       <li><a href="index.html">Home</a></li>
                       <li><a href="subscrever.html">Subscreva o Jornal</a></li>
                       <li><a href="localizacao.html">Localização</a></li>
                       <li><a href="contacto.html">Contacto</a></li>
                   </ul>
               </div>
               <div id="colorPicker">
                   <div id="cinza" class="cinza delta" onclick="mudaBG('#F2F2F2')"></div>
                   <div id="azul" class="blue delta" onclick="mudaBG('#1FB7F2')"></div>
                   <div id="laranja" class="orange delta" onclick="mudaBG('#F89527')"></div>
                   <div id="branco" class="white delta" onclick="mudaBG('#FFF')"></div>
                   <div id="verde" class="green delta" onclick="mudaBG('#5BCF51')"></div>
               </div>
           </div>
           <div id="postingArea">
               <div class="post_entrie">
                   <img src="imagens/thumbnail1.jpg" alt="fragementos do meteorito" />
                   <a href="#">Cientistas russos dizem ter descoberto fragmentos do meteorito</a>
                   <p>Cientistas russos anunciaram esta segunda-feira terem descoberto fragmentos do meteorito que se desintegrou junto à localidade de Tcheliabinsk, nos Urais.</p>
               </div>

               <div class="post_entrie">
                   <img src="imagens/thumbnail2.jpg" alt="Braga vs Rio Ave" />
                   <a href="#">Braga empata no Rio Ave e soma quarto jogo seguido sem vencer</a>
                   <p>Rio Ave e Sporting de Braga não foram hoje além de empate, por 1-1, num resultado construído ainda na primeira parte.</p>
               </div>

               <div class="post_entrie">
                   <img src="imagens/thumbnail3.JPG" alt="Protestos" />
                   <a href="#">Miguel Relvas insultado em Gaia em debate agitado</a>
                   <p>Miguel Relvas voltou a ser insultado, esta segunda-feira à noite, no momento em que discursava, durante um debate organizado pelo Clube de Pensadores.</p>
               </div>

               <div class="post_entrie">
                   <img src="imagens/thumbnail4.JPG" alt="Protestos" />
                   <a href="#">Peritos recomendam incentivos à vinda de professores estrangeiros</a>
                   <p>Estudo da European University Association sobre a rede de ensino superior portuguesa é apresentado hoje.</p>
               </div>

           </div>
           <div id="sidebar">
               <p>Entradas Recentes:</p>
               <ul class="recentPosts">
                   <li>Cientistas russos dizem ter descoberto fragmentos do meteorito</li>
                   <li>Braga empata no Rio Ave e soma quarto jogo seguido sem vencer</li>
                   <li>Miguel Relvas insultado em Gaia em debate agitado</li>
               </ul>
               <p>Pub:</p>
               <a href="http://www.olx.pt"><img src="imagens/pubOLX.png" alt="Pub OLX" /></a>
               <a href="http://pt.ikariam.com"><img src="imagens/pubIkariam.jpg" alt="Pub OLX" /></a>
           </div>
           <div id="footer">
               <div id="bottomMenu" class="delta">
                   <ul>
                       <li><a href="index.html">Home</a></li>
                       <li><a href="subscrever.html">Subscreva o Jornal</a></li>
                       <li><a href="localizacao.html">Localização</a></li>
                       <li><a href="contacto.html">Contacto</a></li>
                   </ul>
               </div>
               <p class="omega">Copyright @ Bruno Casteleiro, 2013</p></div></div>
   </body>

Peço desculpa pela identação, mas ao passar para aqui o código, as linhas não ficam identadas como eu tenho.

Edited by polska

Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.

Posted

como te disse, esse código funciona (pelo menos para mim no chrome e firefox) ...

Eu experimentei chrome e IE, mas não funcionou em nenhum.

Anyway, eu mudei a função para document.body.style.backgroundcolor e funcionou, enfim 😄

Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.