0

Boa noite, vou fornecer uma imagem e o código. Eu não sei fazer, e gostaria de aprender. OBS: eu não quero que a imagem se altere quando eu ENVIAR o form, quero que se altere logo após eu clicar na option! Ao clicar no input do lado esquerdo, TROCAR a imagem do lado direito

Formlário

<form method="POST" action="escalar.php">
<label>Escolha o Goleiro</label><br>
<input type="radio" name="gol" value="Milk"> anderson<br>
<input type="radio" name="gol" value="Butter" checked> davi<br>
<input type="radio" name="gol" value="Cheese"> paulo
<label>Escolha o Tecnico</label><br>
<input type="radio" name="tec" value="Milk"> maikon<br>
<input type="radio" name="tec" value="Butter" checked> dunga<br>
<input type="radio" name="tec" value="Cheese"> kleber
</form>

Imagem

<img src="/componentes/circulo.png" alt="goleiro" style="width: 16%; height:8%; position:relative; margin-top:-125px; margin-left:180px;" />  

Desde já, obrigado

6
  • 1
    Onde estás a ir buscar essas imagens?
    – Sergio
    4/08/2016 às 21:58
  • na pasta do meu servidor. /componentes/circulo.png /componentes/goleiro.png 4/08/2016 às 22:00
  • E esse value dos inputs é a sério ou devia ser circulo, goleiro etc... ? (os nomes das imagens respectivas)
    – Sergio
    4/08/2016 às 22:01
  • Dei uma alterada no código. 4/08/2016 às 22:12
  • Mas também pode ser o nome da imagem, se facilitar no código. 4/08/2016 às 22:16

2 Respostas 2

1

Código explicado:

 // Seu formulário
var form = document.getElementsByTagName('form')[0],

 // Todos input[type=radio] com o nome "gol"
    goalkeeper = form.gol,

 // Todos input[type=radio] com o nome "tec"
    trainer = form.tec;

/**
 * Evento estilo-onchange para vários input[type=radio].
 *
 * @param array list
 * @param function callback
 */
function addRadioChangeEvent(list, callback)
{
    // Função que executa quando um input é provavelmente checado
    // usando onkeydown, onclick, etc.
    var fnc = function(e)
    {
        // Pega a índice do input[type=radio]
        for(var i = 0, el; el = list[i]; i ++)
        {
            if(el === e.target) break;
        }

        // Checa se o input foi checado e se não é igual
        // ao checado anteriormente
        if(el.checked && checked !== i) {
            // Memoriza o input checado
            checked = i;
            // Executa a função no segundo parâmetro já que o
            // input foi modificado, e traz seu valor, e.g:
            // "Milk", no 1st parâmetro
            if(typeof callback === 'function') callback(el.value);
        }

    }, checked = NaN;

    // Memoriza o input checado atualmente
    (function()
    {
        for(var i = 0, el; el = list[i]; i ++)
        {
            if(el.checked) {
                checked = i;
                break;
            }
        }

    })();

    // Eventos usados em cada input
    var evt = ['click', 'keydown', 'keyup'];

    function addEvts(c)
    {
        // Percorre cada input
        for(var b = 0, el; el = list[b]; b ++)
        {
            // Percore cada string na tabela 'evt'
            for(var i = 0, e; e = evt[i]; i ++) c(el, e);
            // E chama o callback ('c') para cada input com uma string do 'evt'
        }
    }

    // Checa se o addEventListener é suportado pelo navegador
    if(typeof (window['Element'] || window['HTMLElement'])['prototype']['addEventListener'] === 'function')

        addEvts(function(el, e) { el.addEventListener(e, fnc) })

    // Se addEventListener não for suportado, usa o attachEvent em vez
    ;else

        addEvts(function(el, e) { el.attachEvent('on' + e, fnc) })
    ;
}

// Pega a sua imagem
var img = document.getElementsByTagName('img')[0];

// Adiciona o evento estilo-onchange para os input[type=radio] que
// que definem o goleiro.
addRadioChangeEvent(goalkeeper, function(value) {

    switch(value)
    {
        case "Milk":
            img.src = "?"; // imagem 1 ?
            break;

        case "Butter":
            img.src = "?"; // imagem 2?
            break;

        default: // "Cheese"
            img.src = "?"; // imagem 3?

    }

});

// Adiciona o evento estilo-onchange para os input[type=radio] que
// que definem o técnico.
addRadioChangeEvent(trainer, function(value) {
    // ?
});
1
  • 1
    Vou tentar, obrigado. Mas mesmo assim aguardarei mais maneiras. 5/08/2016 às 16:25
0

Bom, quero agradecer a todos que tentaram me ajudar. Eu consegui resolver o problema da maneira MAIS fácil possível. Ficou muito fácil mesmo, vou passar como fiz, mas não irei explicar, o código é tão fácil que até iniciantes (como eu) conseguem entender de primeira.

Código js:

<script type="text/javascript"> 
function alterarImagem(objeto, caminhoNovaImagem) {
document.getElementById(objeto).src = caminhoNovaImagem;
}
</script>

Código HTML:

<input type="radio" onclick="alterarImagem('gol', '/componentes/campo.png');" name="group1" value="Milk"> Milk<br>
<img src="/componentes/circulo.png" alt="goleiro" id="gol" style="width: 16%; height:8%; position:relative; margin-top:-125px; margin-left:180px;" />

Como disse, ficou bem simples!

2
  • 1
    Observação: o ponteiro do mouse não é o único que pode ser usado para mudar o estado do input[type=radio], também pode ser usado o teclado. Por exemplo, é só focar no input[type=radio] e pressionar uma tecla direcional/vertical como ^ ou v e vai checar o input[type=radio] anterior ou próximo.
    – user37626
    5/08/2016 às 20:20
  • 1
    Dá para criar vários sistemas legais assim ^^ 5/08/2016 às 20:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .