Ir para o conteúdo
polska

background-color

Mensagens Recomendadas

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.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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 | ...

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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 :)

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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:

Editado por polska

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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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>

Editado por polska

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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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...

Editado por polska

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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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.

Editado por polska

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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.