background-color

polska · February 17, 2013 at 01:20 AM

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?

yoda · February 17, 2013 at 01:23 AM

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

2. Javascript

polska · February 17, 2013 at 01:29 AM

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

2. Javascript

Obrigado 🙂

polska · February 17, 2013 at 01:40 AM

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>

HappyHippyHippo · February 17, 2013 at 01:55 AM

queres passar uma string

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

Virneto · February 17, 2013 at 02:08 AM

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! 🙂

fteixeira1993 · February 17, 2013 at 09:23 AM

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

HappyHippyHippo · February 17, 2013 at 10:18 AM

O inicio da tag nao deveria ser
<script type="text/javascript"

sim essa é a maneira correcta de declarar a tag de script de javascript

o melhor mesmo é ter o javascript separado num ficheiro à parte e fazer include

fteixeira1993 · February 17, 2013 at 10:50 AM

sim essa é a maneira correcta de declarar a tag de script de javascript

o melhor mesmo é ter o javascript separado num ficheiro à parte e fazer include

Obrigado pelo esclarecimento @HappyHippyHippo 🙂

NunoDinis · February 17, 2013 at 01:09 PM

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>

polska · February 17, 2013 at 02:11 PM

@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 February 17, 2013 at 02:12 PM by polska

polska · February 18, 2013 at 09:33 PM

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 February 18, 2013 at 09:33 PM by polska

HappyHippyHippo · February 18, 2013 at 09:59 PM

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" ?
       }

polska · February 18, 2013 at 10:02 PM

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! 😄

polska · February 19, 2013 at 01:55 AM

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 February 19, 2013 at 01:55 AM by polska

HappyHippyHippo · February 19, 2013 at 09:34 AM

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

polska · February 19, 2013 at 12:02 PM

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 February 19, 2013 at 12:04 PM by polska

HappyHippyHippo · February 19, 2013 at 12:15 PM

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

polska · February 19, 2013 at 07:41 PM

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 😄

Sign In

background-color

Recommended Posts

polska

yoda

polska

polska

HappyHippyHippo

Virneto

fteixeira1993

HappyHippyHippo

fteixeira1993

NunoDinis

polska

polska

HappyHippyHippo

polska

polska

HappyHippyHippo

polska

HappyHippyHippo

polska

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information