polska 21 Report post Posted February 17, 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? Quote 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
yoda 138 Report post Posted February 17, 2013 1. Sim, dá para criares botões com transparência e aplicar qualquer cor; 2. Javascript Quote before you post, what have you tried? - http://filipematias.info sense, purpose, direction Share this post Link to post Share on other sites
polska 21 Report post Posted February 17, 2013 1. Sim, dá para criares botões com transparência e aplicar qualquer cor; 2. Javascript Obrigado Quote 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 21 Report post Posted February 17, 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> Quote 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 1,188 Report post Posted February 17, 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> Quote IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Share this post Link to post Share on other sites
Virneto 75 Report post Posted February 17, 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! Quote "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 9 Report post Posted February 17, 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 Quote Share this post Link to post Share on other sites
HappyHippyHippo 1,188 Report post Posted February 17, 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 Quote IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Share this post Link to post Share on other sites
fteixeira1993 9 Report post Posted February 17, 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 Quote Share this post Link to post Share on other sites
NunoDinis 40 Report post Posted February 17, 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> Quote 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 21 Report post Posted February 17, 2013 (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 February 17, 2013 by polska Quote 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 21 Report post Posted February 18, 2013 (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 February 18, 2013 by polska Quote 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 1,188 Report post Posted February 18, 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" ? } Quote IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Share this post Link to post Share on other sites
polska 21 Report post Posted February 18, 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! Quote 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 21 Report post Posted February 19, 2013 (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 February 19, 2013 by polska Quote 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 1,188 Report post Posted February 19, 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 Quote IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Share this post Link to post Share on other sites
polska 21 Report post Posted February 19, 2013 (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 February 19, 2013 by polska Quote 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 1,188 Report post Posted February 19, 2013 como te disse, esse código funciona (pelo menos para mim no chrome e firefox) ... Quote IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Share this post Link to post Share on other sites
polska 21 Report post Posted February 19, 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 Quote 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
