Jump to content
vinicius59

Dúvida de como colocar objetos na tela!

Recommended Posts

Então... há algum tempo venho pesquisando em vários sites sobre a duvida que eu tenho, ela se consiste em como eu posso fazer (2 botoes) que ao ser acionado cria-se um quadrado pequeno de uma cor que eu vou escolher! Se alguém poder responder 'Me desculpem se essa duvida não for relacionada ao php sou novo aqui'.

Share this post


Link to post
Share on other sites

vinicius59

Copie os códigos abaixo para os arquivos INDEX.PHP e RESULTADO.PHP e salve as imagens dentro da mesma pasta.

 

Arquivo: INDEX.PHP

<form name="formaGeo" method="POST" action="resultado.php" >
<select name="CorFormaGeometrica">
    <option value='azul' selected>Azul</option>
    <option
value='vermelho'>Vermelho</option>
    <option
value='outro'>Sem Cor</option>
</select>

<input type="submit" value="Clique aqui" />

</form>

 

Arquivo: RESULTADO.PHP

<?php
if ($_POST['CorFormaGeometrica'] == "azul") {
    echo "<img src='azul.jpg'>";
} else {
    if ($_POST['CorFormaGeometrica'] == "vermelho") {
        echo <img src='vermelho.jpg'>";
    } else {
        echo "<img src='cinza.jpg'>";
    }
}

echo "<a href='index.php'> Voltar </a>";
?>

 

Você precisa salvar as imagens com o mesmo nome que coloquei

 

azul.jpg

cinza.jpg

vermelho.jpg

 

Espero ter ajudado de alguma forma.

 

Att.

Felipe Coutinho

azul.jpg

cinza.jpg

vermelho.jpg

Share this post


Link to post
Share on other sites

Existem incontáveis formas de fazer algo assim, cada qual para seu cada qual.

Se você explicar melhor o que deseja poderá ter uma resposta mais coesa.

 

<div id="quadrado" style="display:none; height:50px; width:50px; background-color:red">
    Isso só aparece se clicar em algum botão
</div>

<button class="botao">Botão 1</button>
<button class="botao">Botão 2</button>

<script>
    var btn = document.getElementsByClassName('botao');
    for (var i = 0; i < btn.length; i++) {
        btn[i].addEventListener('click', function () {
            document.getElementById('quadrado').setAttribute('style', 'display:block');
        }, false);
    }
</script>

 

Share this post


Link to post
Share on other sites

e para por por botões do teclado, você pode me ajudar

1 hora atrás, Omar~ disse:

Existem incontáveis formas de fazer algo assim, cada qual para seu cada qual.

Se você explicar melhor o que deseja poderá ter uma resposta mais coesa.

 


<div id="quadrado" style="display:none; height:50px; width:50px; background-color:red">
    Isso só aparece se clicar em algum botão
</div>

<button class="botao">Botão 1</button>
<button class="botao">Botão 2</button>

<script>
    var btn = document.getElementsByClassName('botao');
    for (var i = 0; i < btn.length; i++) {
        btn[i].addEventListener('click', function () {
            document.getElementById('quadrado').setAttribute('style', 'display:block');
        }, false);
    }
</script>

 

Então, eu queria certinho é esse script só que em vez de precisar selecionar, for por botão do teclado, o numero 1 seria verde o numero 2 vermelho e o numero 3 cinza, você consegue? e esqueci de colocar que tem que ficar em fileira os quadrados que eu por, e não carregar só um quadrado.

Share this post


Link to post
Share on other sites

Omar~

Você pode me ajudar com o seu código, apesar de eu ter entendido o funcionamento dele, no meu caso, não esta aparecendo o quadrado vermelho.

 

Será que não deveria ser assim o código:

 

<div id="quadrado" style="display:none; height:50px; width:50px; background-color:red">
    Isso só aparece se clicar em algum botão
</div>

 

<button class="botao">Botão 1</button>

 

<script>
    var btn = document.getElementsByClassName('botao');
    for (var i = 0; i < btn.length; i++) {
        btn.addEventListener('click', function () {
        document.getElementById('quadrado').style.display='';
        }, false);
    }
</script>

 

Porque essa parte no meu caso faz aparecer o texto, mas não o quadrado com a cor em questão "vermelho", achei o seu código bem legal, mas no meu caso não funcionou, poderia dar uma esplicação?

:smiley::thumbsup:

document.getElementById('quadrado').setAttribute('style', 'display:block');

vinicius59

Fiz uns ajustes no código que fiz, alterando de PHP para apenas HTML e JavaScript

Veja qual melhor lhe atende, mas lembrando o que o Omar escreveu, existem muitos jeitos de se fazer o que você quer.

Veja os exemplos que colocamos e escolha qual melhor lhe atende.

O meu novo exemplo abaixo, você não precisa nem de um arquivo PHP, basta colocar dentro de um bloco de notas e salvar com "QualquerNome.HTML", salvar e dar 2 cliques.

 

Obs.: Lembrando que o meu exemplo uso também imagens para representar o quadrado da cor escolhida, então você deve colocar as 3 imagens que coloquei no meu post anterior junto com o seu arquivo.HTML dentro de uma mesma pasta para executar corretamente:

 

Meu código com a div do código que o Omar passou que achei muito interessante:

<script>
    function exibirForma(){
    var e = document.getElementById("CorFormaGeometrica");
    var itemSelecionado = e.options[e.selectedIndex].value;
    if(itemSelecionado=="azul"){
        document.getElementById('azul').style.visibility='visible';
        document.getElementById('azul').style.display='';
        document.getElementById('cinza').style.visibility='hidden';
        document.getElementById('cinza').style.display='none';
        document.getElementById('vermelho').style.visibility='hidden';
        document.getElementById('vermelho').style.display='none';
        document.getElementById('quadrado_azul').style.visibility='visible';
        document.getElementById('quadrado_azul').style.display='';
        document.getElementById('quadrado_cinza').style.visibility='hidden';
        document.getElementById('quadrado_cinza').style.display='none';
        document.getElementById('quadrado_vermelho').style.visibility='hidden';
        document.getElementById('quadrado_vermelho').style.display='none';
    } else if (itemSelecionado=="cinza"){
        document.getElementById('azul').style.visibility='hidden';
        document.getElementById('azul').style.display='none';
        document.getElementById('cinza').style.visibility='visible';
        document.getElementById('cinza').style.display='';
        document.getElementById('vermelho').style.visibility='hidden';
        document.getElementById('vermelho').style.display='none';
        document.getElementById('quadrado_azul').style.visibility='hidden';
        document.getElementById('quadrado_azul').style.display='none';
        document.getElementById('quadrado_cinza').style.visibility='visible';
        document.getElementById('quadrado_cinza').style.display='';
        document.getElementById('quadrado_vermelho').style.visibility='hidden';
        document.getElementById('quadrado_vermelho').style.display='none';
    } else if (itemSelecionado=="vermelho"){
        document.getElementById('azul').style.visibility='hidden';
        document.getElementById('azul').style.display='none';
        document.getElementById('cinza').style.visibility='hidden';
        document.getElementById('cinza').style.display='none';
        document.getElementById('vermelho').style.visibility='visible';
        document.getElementById('vermelho').style.display='';
        document.getElementById('quadrado_azul').style.visibility='hidden';
        document.getElementById('quadrado_azul').style.display='none';
        document.getElementById('quadrado_cinza').style.visibility='hidden';
        document.getElementById('quadrado_cinza').style.display='none';
        document.getElementById('quadrado_vermelho').style.visibility='visible';
        document.getElementById('quadrado_vermelho').style.display='';
    };
    }
</script>

 

<select name="CorFormaGeometrica" id="CorFormaGeometrica">
    <option value='azul' selected>Azul</option>
    <option value='vermelho'>Vermelho</option>
    <option value='cinza'>Cinza</option>
</select>

 

<input type="button" onClick="exibirForma()" value="Exibir"><br />

 

<img id="azul" src="azul.jpg" style="display:none; visibility:'visible'">
<img id="cinza" src="cinza.jpg" style="display:none; visibility:'visible'">
<img id="vermelho" src="vermelho.jpg" style="display:none; visibility:'visible'">

 

<div id="quadrado_azul" style="display:none; height:50px; width:50px; background-color:blue"></div>
<div id="quadrado_cinza" style="display:none; height:50px; width:50px; background-color:silver"></div>
<div id="quadrado_vermelho" style="display:none; height:50px; width:50px; background-color:red"></div>

 

Espero ter ajudado de alguma forma

 

Att.

Felipe Coutinho

Share this post


Link to post
Share on other sites

Então, eu queria certinho é esse script só que em vez de precisar selecionar, for por botão do teclado, o numero 1 seria verde o numero 2 vermelho e o numero 3 cinza, você consegue? e esqueci de colocar que tem que ficar em fileira os quadrados que eu por, e não carregar só um quadrado.

Share this post


Link to post
Share on other sites

vinicius59

Segue o código, não esqueça de agradecer a resposta e votar a favor dos nossos post.

 

<script>
function exibirFormaTecla(){
    var selecionarCor = document.getElementById("vlr_cor").value;
    if(selecionarCor==1){
        document.getElementById('quad_verde').style.visibility='visible';
        document.getElementById('quad_verde').style.display='';
    } else if (selecionarCor==2){
        document.getElementById('quad_vermelho').style.visibility='visible';
        document.getElementById('quad_vermelho').style.display='';
    } else if (selecionarCor==3){
        document.getElementById('quad_cinza').style.visibility='visible';
        document.getElementById('quad_cinza').style.display='';
    } else if (selecionarCor==4){
        document.getElementById('quad_azul').style.visibility='visible';
        document.getElementById('quad_azul').style.display='';
    } else if (selecionarCor==0){
        document.getElementById('quad_verde').style.visibility='hidden';
        document.getElementById('quad_verde').style.display='none';
        document.getElementById('quad_cinza').style.visibility='hidden';
        document.getElementById('quad_cinza').style.display='none';
        document.getElementById('quad_vermelho').style.visibility='hidden';
        document.getElementById('quad_vermelho').style.display='none';
        document.getElementById('quad_azul').style.visibility='hidden';
        document.getElementById('quad_azul').style.display='none';
    }
    document.getElementById("vlr_cor").value = document.getElementById("vlr_cor").value.substring(0,0);
};
</script>

 

<h1>Digite os números para aparecer as cores:</h1>
<h3>[ 1 - Verde | 2 - Vermelho | 3 - Cinza | 4 - Azul | 0 - Apagar ]
<input type="text" id="vlr_cor" placeholder="Pressione um número" size="20" onKeyUp="exibirFormaTecla()" autofocus></h3>
 
<table>
<tr>
<td><div
id="quad_verde" style="display:none; height:50px; width:50px; background-color:green"></div></td>
<td><div id="quad_vermelho" style="display:none; height:50px; width:50px; background-color:red"></div></td>
<td><div id="quad_cinza" style="display:none; height:50px; width:50px; background-color:silver"></div></td>
<td><div id="quad_azul" style="display:none; height:50px; width:50px; background-color:blue"></div></td>
</tr>
</table>

 

Estude o código, pois a sua necessidade é de baixa complexidade, tente fazer você colocando mais cores e mais botões.

 

Espero ter ajudado de alguma forma

 

Att.

Felipe Guedes Coutinho

Share this post


Link to post
Share on other sites

@Felipe Guedes Coutinho

Quando você faz a seguinte a manipulação de um elemento dessa forma:

elemento.style.display = "(table|block|inline-block|etc..)";

Você está removendo todo seu atributo style, substituindo o que existia pelo novo. Pode se feito assim também desde que as demais propriedades do elementos estejam em folha de estilo.

Quando se ataca diretamente o uma propriedade de atributo específico usamos

setAttribute('atributo', 'propriedade e valor a alterar/adicionar');

 

 

Aqui também devo ressaltar, que ficar buscando por vários elementos quando se aciona uma função não é o ideal, pois perdemos em performasse ao executar uma função. Devemos evitar ficar fazendo muitas varreduras no DOM, para melhor desempenho (lógico que em algumas situações isso é impossível).

O ideal por exemplo é buscar todos esses elementos em um pré carregamento armazena-los e então usar esse armazenamento para atacar os elementos.

 

 

@vinicius59

16 horas atrás, vinicius59 disse:

Então, eu queria certinho é esse script só que em vez de precisar selecionar, for por botão do teclado, o numero 1 seria verde o numero 2 vermelho e o numero 3 cinza, você consegue? e esqueci de colocar que tem que ficar em fileira os quadrados que eu por, e não carregar só um quadrado.

Não sei ainda se és isso que procura mas veja:

<style>
    #vermelho,
    #verde,
    #azul {
        float: left; /* Eles vão ficar um ao lado do outro */
        width: 200px;
        height: 200px;
        display: none
    }
    #vermelho.mostrar,
    #verde.mostrar,
    #azul.mostrar {
        display: block
    }
    #vermelho {background-color: red}
    #verde {background-color: green}
    #azul  {background-color: blue}
</style>

<div id="vermelho">
    Quadrado vermelho
</div>
<div id="verde">
    Quadrado verde
</div>
<div id="azul">
    Quadrado azul
</div>

<!-- Necessário lipar os dados flutuantes para correta
     orientação dos supostos novos elementos que podem
     aparecer depois dos quadrados
-->
<div style="clear: both"></div>

<script>
    // O evento keypress detecta quando uma tecla é acionada
    document.addEventListener('keypress', executaFuncao, false);

    // Armazenamos em um array quais são os elementos que vamos manipular
    var elementos = [
        document.getElementById('vermelho'), // elementos[0]
        document.getElementById('verde'), // elementos[1]
        document.getElementById('azul')      // elementos[2]
    ];

    function executaFuncao(e) {
        var key = e.keyCode;
        switch (key) {
            case 49: // Tecla 1
                elementos[0].classList.toggle('mostrar'); // Vermelho
                break;
            case 50: // Tecla 2
                elementos[1].classList.toggle('mostrar'); // Verde
                break;
            case 51: // Tecla 3
                elementos[2].classList.toggle('mostrar'); // azul
                break;

                /*
                 * // Isso está em comentário caso queria que todos
                 * // eles apareçam se qualquer uma das teclas forem
                 * // acionadas, remova a bateria de cima e deixe essa.
                 case 49: // Tecla 1
                 case 50: // Tecla 2
                 case 51: // Tecla 3
                 for (var i = 0; i < elementos.length; i++) {
                 elementos[i].classList.toggle('mostrar');
                 }
                 break;
                 */
        }
    }
</script>

Nesse exemplo usei as sequências de injeção classList.toggle, o que fará com que o elemento classificador seja adicionado quando clicado no botão ou removido caso seja acionada a tecla novamente.

Se quiser que eles continuem mesmo clicando novamente terá que modificar para:

classList.add

Nesse caso teremos que consultar se o elemento não tem o que vai adicionado caso contrário inicia o vicio HTML. 

<div class="mostrar mostrar mostrar mostrar mostrar.... Isso irá se repetir toda vez que uma das teclas forem pressionadas.

Para prevenir:

case 49: // Tecla 1
    if (!elementos[0].classList.contains('mostrar')) { // Verificamos se não tem a class "mostrar"
        elementos[0].classList.add('mostrar'); // Vermelho
    }
break;

/* ou no segunda questão */
for (var i = 0; i < elementos.length; i++) {
    if (!elementos[i].classList.contains('mostrar')) {
        elementos[i].classList.add('mostrar');
    }
}

 

 

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By erikjfn
      Olá pessoal! Estou desenvolvendo uma aplicação que usa uma página html com css como controle de uma pequeno game que estou fazendo. Quero que quando eu pressionar um botão e deixar ele pressionado a ação executada desse botão continue em execução (por exemplo acelerar um carro do game) e quando soltar esse botão a ação seja encerrada. É possível fazer isso ? sinceramente eu comecei  a ver html essa semana e não achei algo a respeito. Alguém pode me ajudar nessa?
    • By JurisCode
      é assim.
       
      em um lugar do site vai ter um link daqueles que posicionam a rolagem na âncora.
       
      no entanto, nessa ancoragem vai ter um IFRAME e eu gostaria que o link, ao mesmo tempo, mudasse a página do IFRAME pelo atributo _target e posicionasse o scroll pela ancora.
       
      Tem como fazer as duas coisas no mesmo click?
    • By NINO2391
      Bom Glr, Tô Fazendo Um Web Site E Quero Fazer Umas Funções Escondidas Nela!
       
      bom meu objetivo era tipo apertas as tecla do teclado CTRL+A e abrir uma janela flutuante
      <form action=""> <input type="file" name="tag"><br> <input type="submit" value="Submit"> </form> Então vou falar resumidamente: ENTRAVA NO SITE, APERTAVA CTRL+A E APARECIA ESSA JANELA FLUTUANTE!!
       
      Quem Puder Ajudar....Ficaria Mil Agradecido!!!
    • By Pablo Bernardo
      Gostaria de fazer um botão que levasse o usuário não pra uma página da web, e sim para um aplicativo de seu computador.
      No caso iniciasse o aplicativo do computador ai clicar no botão.
    • By VCastilho
      Bom Dia
      Consegui da seguinte forma, mas com faço para que o código selecionado substitua o antigo?

       
      <!DOCTYPE html> <html> <body> <style> #filtrotopo { background: #484949; } } #h4topo { text-align: center; color: white; font-size: 18px; } #form1 section { display: flex; flex-wrap: wrap; justify-content: center; } h4 { } #form1 section label { display: flex; justify-content: center; align-items: center; margin: 0 10px; /* width: calc(100% / 5); */ color: red; text-align: center; } @media screen and (max-width:768px) { #form1 section label { margin-bottom: 20px; width: 100%; } } </style> <div id="minhaEscolha"></div> <div id = "filtrotopo"> <h4 style="text-align: center;" id="h4topo">Personalize</h4> <form action="#" id="form1"> <section> <label> <button onclick="exemplo1()"> exemplo1</button> </label> <label> <button onclick="exemplo2()"> exemplo2 </button> </label> </section> </form> <br> </div> <div id="teste1" style="display: none;"> <h3>Texto 1</h3> <p>Sou o Texto 1</p> <p>Tenho o nome de Texto 1</p> </div> <script> function exemplo1() { var x = document.getElementById("url"); var y = document.getElementById("minhaEscolha"); y.innerHTML = x.innerHTML; } </script> <script> function exemplo2() { var x = document.getElementById("teste1"); var y = document.getElementById("minhaEscolha"); y.innerHTML = x.innerHTML; } </script> <body> </html>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.