background-color

17 de Fevereiro de 2013

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?

17 de Fevereiro de 2013

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

2. Javascript

17 de Fevereiro de 2013

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

2. Javascript

Obrigado

17 de Fevereiro de 2013

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>

17 de Fevereiro de 2013

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>

17 de Fevereiro de 2013

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!

17 de Fevereiro de 2013

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

17 de Fevereiro de 2013

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

17 de Fevereiro de 2013

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

17 de Fevereiro de 2013

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>

17 de Fevereiro de 2013

@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

Editado 17 de Fevereiro de 2013 por polska

18 de Fevereiro de 2013

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>

Editado 18 de Fevereiro de 2013 por polska

18 de Fevereiro de 2013

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

18 de Fevereiro de 2013

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!

19 de Fevereiro de 2013

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...

Editado 19 de Fevereiro de 2013 por polska

19 de Fevereiro de 2013

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

19 de Fevereiro de 2013

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.

Editado 19 de Fevereiro de 2013 por polska

19 de Fevereiro de 2013

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

19 de Fevereiro de 2013

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

background-color

Mensagens Recomendadas

polska 21

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

yoda 138

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

polska 21

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

polska 21

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

HappyHippyHippo 1185

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

Virneto 75

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

fteixeira1993 9

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

HappyHippyHippo 1185

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

fteixeira1993 9

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

NunoDinis 40

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

polska 21

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

polska 21

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

HappyHippyHippo 1185

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

polska 21

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

polska 21

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

HappyHippyHippo 1185

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

polska 21

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

HappyHippyHippo 1185

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

polska 21

Partilhar esta mensagem

Ligação para a mensagem

Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Criar nova conta