polska Posted February 17, 2013 at 01:20 AM Report #495740 Posted 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? Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.
yoda Posted February 17, 2013 at 01:23 AM Report #495741 Posted February 17, 2013 at 01:23 AM 1. Sim, dá para criares botões com transparência e aplicar qualquer cor; 2. Javascript before you post, what have you tried? - http://filipematias.info sense, purpose, direction
polska Posted February 17, 2013 at 01:29 AM Author Report #495742 Posted February 17, 2013 at 01:29 AM 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.
polska Posted February 17, 2013 at 01:40 AM Author Report #495743 Posted 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> Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.
HappyHippyHippo Posted February 17, 2013 at 01:55 AM Report #495744 Posted 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> IRC : sim, é algo que ainda existe >> #p@p Portugol Plus
Virneto Posted February 17, 2013 at 02:08 AM Report #495746 Posted 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! 🙂 "Que inquieto desejo vos tortura, Seres elementares, força obscura? Em volta de que ideia gravitais?" >> Anthero de Quental - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Linuxando.com | ...
fteixeira1993 Posted February 17, 2013 at 09:23 AM Report #495753 Posted 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 Posted February 17, 2013 at 10:18 AM Report #495763 Posted 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 IRC : sim, é algo que ainda existe >> #p@p Portugol Plus
fteixeira1993 Posted February 17, 2013 at 10:50 AM Report #495766 Posted 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 Posted February 17, 2013 at 01:09 PM Report #495804 Posted 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> Estranha forma de vida que tem a capacidade de transformar comandos em mensagens de erro. ndsotware.org
polska Posted February 17, 2013 at 02:11 PM Author Report #495812 Posted February 17, 2013 at 02:11 PM (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 at 02:12 PM by polska Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.
polska Posted February 18, 2013 at 09:33 PM Author Report #496066 Posted February 18, 2013 at 09:33 PM (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 at 09:33 PM by polska Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.
HappyHippyHippo Posted February 18, 2013 at 09:59 PM Report #496068 Posted 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" ? } IRC : sim, é algo que ainda existe >> #p@p Portugol Plus
polska Posted February 18, 2013 at 10:02 PM Author Report #496070 Posted 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! 😄 Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.
polska Posted February 19, 2013 at 01:55 AM Author Report #496098 Posted February 19, 2013 at 01:55 AM (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 at 01:55 AM by polska Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.
HappyHippyHippo Posted February 19, 2013 at 09:34 AM Report #496103 Posted 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 IRC : sim, é algo que ainda existe >> #p@p Portugol Plus
polska Posted February 19, 2013 at 12:02 PM Author Report #496118 Posted February 19, 2013 at 12:02 PM (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 at 12:04 PM by polska Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.
HappyHippyHippo Posted February 19, 2013 at 12:15 PM Report #496121 Posted February 19, 2013 at 12:15 PM como te disse, esse código funciona (pelo menos para mim no chrome e firefox) ... IRC : sim, é algo que ainda existe >> #p@p Portugol Plus
polska Posted February 19, 2013 at 07:41 PM Author Report #496207 Posted 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 😄 Corrige um sábio e ele mais sábio ficará. Corrige um ignorante e um inimigo ganharás.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now