Jump to content
polska

background-color

Recommended Posts

polska

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 :D ? 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.

Share this post


Link to post
Share on other sites
polska

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.

Share this post


Link to post
Share on other sites
polska

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.

Share this post


Link to post
Share on other sites
HappyHippyHippo

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>


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
Virneto

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

Share this post


Link to post
Share on other sites
fteixeira1993

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

Share this post


Link to post
Share on other sites
HappyHippyHippo

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


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
fteixeira1993

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 :)

Share this post


Link to post
Share on other sites
NunoDinis

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

Share this post


Link to post
Share on other sites
polska

@Happy, era mesmo isso, obrigado :D

@Virneto, eu tinha pensado mesmo em fazer os quadrados ou circulos como botão, mas como div também não está mal pensado :D , 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 :thumbsup:

Edited by polska

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

Share this post


Link to post
Share on other sites
polska

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.

Share this post


Link to post
Share on other sites
HappyHippyHippo

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


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
polska

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! :D


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

Share this post


Link to post
Share on other sites
polska

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.

Share this post


Link to post
Share on other sites
HappyHippyHippo

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


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
polska

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.

Share this post


Link to post
Share on other sites
polska

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 :D


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


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