[Resolvido] Transformar valores de radio

sandra_has · Fevereiro 20, 2009

Possuo um projeto de linguística que quero disponibilizar na net, porém, não conheço javascript a fundo, conheço apenas a lógica... portanto, se alguém puder me ajudar, pleaaaaaaaaaaaase!!!

Bem, eu tenho duas tabelas (chamei de firstImage e lastImage)com opções em radio butttons disponíveis para o usuário escolher os valores (chamei de X1, X2 (...) e Y1, Y2 (...), e conforme for trocando as opções, a imagem chamada será diferente.

Eu consegui achar uma função que "pega" corretamente os valores de cada radio button, porém, não sei transformar esses valores em uma imagem. Ou seja, preciso pegar os valores de X e Y e transformar em um jpeg. E preciso saber como fazer o call desse resultado de imagem na página em html ou php.

Segue o código: (São 20 valores para x e 20 para y, porém, apenas postei dois de cada para exemplificar). Se alguém puder me ajudar, ficaria realmente muito muito muito grata, porque já faz mais de um mês que tento e não consigo http://forum.imasters.com.br/public/style_emoticons/default/cry.gif Mesmo que seja uma vaga idéia do que poderia solucionar o meu problema!

var xImage = "";

var yImage = "";

var fullImage = "";

function process(){

//initialing variables locally

//find checked firstImage

for (i = 0; i < document.form1.firstImage.length; i++){

if (document.form1.firstImage.checked == true){

xImage = document.form1.firstImage.value;

}//ends firstImage IF

}//ends firstImage FOR

//find checked lastImage

for (i=0; i < document.form1.lastImage.length; i++){

if(document.form1.lastImage.checked == true){

yImage = document.form1.lastImage.value;

}//ends lastImage IF

}//ends lastImage FOR

}//ends function

</script>

E a parte de html

</form>

klonder · Fevereiro 20, 2009

<html>

<head>

<title>Imagem e radio buttons</title>

function alterar(l,e) {

document.getElementById("Fixa"+l).src = e;

}

</script>

</head>

<body>

<tr>

<td width="30%" valign="top">Selecione a imagem X:

<br><input type="radio" name="ImgX" value="imagem1.jpg" onClick="alterar('ImgX','imagem1.jpg')" checked>Imagem 1</input>

<br><input type="radio" name="ImgX" value="imagem2.jpg" onClick="alterar('ImgX','imagem2.jpg')">Imagem 2</input>

<br><input type="radio" name="ImgX" value="imagem3.jpg" onClick="alterar('ImgX','imagem3.jpg')">Imagem 3</input>

<br><input type="radio" name="ImgX" value="imagem4.jpg" onClick="alterar('ImgX','imagem4.jpg')">Imagem 4</input>

<br><br>Selecione a imagem Y:

<br><input type="radio" name="ImgY" value="imagem5.jpg" onClick="alterar('ImgY','imagem5.jpg')" checked>Imagem 5</input>

<br><input type="radio" name="ImgY" value="imagem6.jpg" onClick="alterar('ImgY','imagem6.jpg')">Imagem 6</input>

<br><input type="radio" name="ImgY" value="imagem7.jpg" onClick="alterar('ImgY','imagem7.jpg')">Imagem 7</input>

<br><input type="radio" name="ImgY" value="imagem8.jpg" onClick="alterar('ImgY','imagem8.jpg')">Imagem 8</input>

</td>

</td>

</tr>

</table>

</form>

</body>

</html>

sandra_has · Fevereiro 20, 2009

Klonder, muitíssimo obrigada pela atenção!!!

Mas não entendo mto disso e estou fazendo um esforço enorme para entender a lógica...hehehe

Bem, acho que aprendi como chamar a imagem em html!!! (eba!) Porém, me falta a parte de juntar os valores e formar uma única imagem para cada combinanção de escolhas em X e Y. Pensei em algo como:

else{fullImage.src=xImage+yImage+".jpg";}

mas não está funcionando e não sei se estou no caminho correto... pode me dar mais uma luz?

obrigada

klonder · Fevereiro 20, 2009

Pensei, em um primeiro momento, na seguinte situação:

Você teria um grupo X e outro grupo Y de botões do tipo radio. Quando selecionasse algum item do grupo X, apareceria uma imagem, (hemiface, ou parte superior de uma imagem, por exemplo). Ao selecionar algum item do grupo Y, apareceria outra metade da imagem.

Bem, eu tenho duas tabelas (chamei de firstImage e lastImage)com opções em radio butttons disponíveis para o usuário escolher os valores (chamei de X1, X2 (...) e Y1, Y2 (...), e conforme for trocando as opções, a imagem chamada será diferente.

Mas agora, o que está parecendo é que você quer pegar apenas o "valor" de um dos itens do grupo X e apenas o "valor" de dos itens do grupo Y e montar apenas "uma" imagem, como uma espécie de concatenação de strings de valores, correto?

Exemplo:

X1: aaa | Y1: bbb

X2: ccc | Y2: ddd

(X1 + Y1) Resultaria em: aaabbb.jpg;

(X2 + Y1) Resultaria em: cccbbb.jpg;

(X1 + Y2) Resultaria em: aaaddd.jpg;

(X2 + Y2) Resultaria em: cccddd.jpg.

Você deseja montar a imagem na mesma página do formulário que contém os radiobuttons, ou quer apenas enviar o valor concatenado para outra página php?

sandra_has · Fevereiro 21, 2009

Sim, sim!!! Exatamente isso o que você exemplificou... preciso juntar os valores de X e Y para virar uma imagem apenas e aparecer na própria página do que contém um formulário.

Porque é uma página interativa, onde irei apresentar os resultados em forma de imagem, conforme os valores de X e Y forem sendo mudados.

Preciso chamar também um texto explicando e também um arquivo de som!!! Mas, no momento, estou mais preocupada com as imagens.....hehehe

Se puder, me ajudar, por favor!!!

klonder · Fevereiro 21, 2009

O código a seguir pega o valor retornado pelo grupo de radios X e concatena com o valor retornado pelo grupo Y, formando a string (ou o nome) de uma imagem qualquer.

Como é necessário você ter imagens disponíveis em seu diretório, o espaço referente à imagem ficará vazio, mas isso obviamente será corrigido após a adaptação.

Para testar, basta copiar todo o código a seguir e testar em seu editor:

<html><head>
<title>Imagem e radio buttons</title>
<script type="text/javascript">
function alterar(l,e) {
//Percorrendo o grupo X:
var objRadioX = document.forms["form1"].elements["imagemX"];
var imgX;
for(var iX = 0; iX < objRadioX.length; iX++) {
	if(objRadioX[iX].checked == true) {
		imgX = objRadioX[iX].value;
	}
}

//Percorrendo o grupo Y:
var objRadioY = document.forms["form1"].elements["imagemY"];
var imgY;
for(var iY = 0; iY < objRadioY.length; iY++) {
	if(objRadioY[iY].checked == true) {
		imgY = objRadioY[iY].value;
	}
}

//Escrevendo na tela:
var resultado = imgX + imgY + ".jpg";
document.getElementById("imgResult").innerHTML = resultado;
document.getElementById("imgResult2").innerHTML = "<img src='"+resultado+"'>";
}
</script>
</head>
<body onLoad="alterar()">
<form name="form1" action="pagina_php.php" method="post">
<table border="1" width="100%">
<tr>
	<td width="30%" valign="top">Selecione a imagem X:
<br><input type="radio" name="imagemX" value="X1" onClick="alterar()">X 1</input>
<br><input type="radio" name="imagemX" value="X2" onClick="alterar()" checked>X 2</input>
<br><input type="radio" name="imagemX" value="X3" onClick="alterar()">X 3</input>
<br><input type="radio" name="imagemX" value="X4" onClick="alterar()">X 4</input>

<br><br>Selecione a imagem Y:
<br><input type="radio" name="imagemY" value="Y1" onClick="alterar()" checked>Y 1</input>
<br><input type="radio" name="imagemY" value="Y2" onClick="alterar()">Y 2</input>
<br><input type="radio" name="imagemY" value="Y3" onClick="alterar()">Y 3</input>
<br><input type="radio" name="imagemY" value="Y4" onClick="alterar()">Y 4</input>
	</td>
	<td valign="top">
	<span id="imgResult"></span>
	<br><br>
	<span id="imgResult2"></span>
	</td>
</tr>
</table>
<input type="submit" value="Enviar">
</form>
</body></html>

sandra_has · Fevereiro 21, 2009

Klonder!!!! você é o máximo!!! Mto mto mto obrigada!!! Mesmo!!! Funcionou direitinho!!!

E pra chamar o texto e o arquivo de som eu posso estar usando o mesmo código para percorrer X e Y e apenas adaptar o que vai ser escrito na tela?...hehehehehe, desculpa abusar, mas é que eu não sei disso!!!

Olha, de qualquer forma, parabéns pela boa vontade!!! É mesmo difícil de acreditar que existam pessoas que se disponibilizam a ajudar desta maneira.

você teria algum contato para o caso de precisar dos seus conhecimentos para algum futuro projeto? Como este é pessoal, não tenho verba, mas trabalho com pessoas que precisam disponibilizar seus projetos na internet, mas não sabem como, e esses projetos possuem financiamentos.

Mais uma vez, mto otbrigada! E se puder me orientar mais um pouquinho... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

klonder · Fevereiro 22, 2009

E pra chamar o texto e o arquivo de som eu posso estar usando o mesmo código para percorrer X e Y e apenas adaptar o que vai ser escrito na tela?

Você quer chamar o texto em um textarea, div ou span? Os textos serão capturados de um banco de dados ou já estarão disponíveis no próprio HTML, como "divs" ocultos?

Em relação ao som, ele deverá tocar assim que a imagem mudar, sendo um som específico para cada imagem ou o som é aleatório?

Fiz essas perguntas para irmos direto ao ponto, hehe!

você teria algum contato para o caso de precisar dos seus conhecimentos para algum futuro projeto?

Em PM, por favor B)

sandra_has · Fevereiro 22, 2009

bem.. como lhe disse... eu não entendo mto como funcionam essas coisas... mas tinha pensado em ter os textos com extensão txt em uma pasta e utilizar dos próprios valores de x e y para formar o nome do texto e o texto ir se buscado... como acontece com a figura... será que isso existe?! Porque para colocar oculto na página ficaria muito extenso, já que serão 400 textos explicativos, uma vez que são 20 valores para x e mais 20 para y!!! Mas não sei... não precisa ser nada específico... aparecendo os textos explicando cada imagem é o que importa....hehehehe

quanto aos sons, eles serão específicos para cada imagem também... tinha pensado em usar o mesmo princípio da captura de valor de x e y e puxar um media player ou qualquer outro tocador para q o usuário possa fazer "play" e escutar o som referente a imagem.

ah, desculpa a ignorância, mas o que é entrar em contato em PM?!.....hihihihhi, não entendo esses termos!!!

obrigada pela ajuda e paciência.

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

klonder · Fevereiro 22, 2009

Sandra, trabalhar com TXT em Javascript é meio canseira... na verdade eu nunca fiz. Porém, você pode deixar o texto, já formatado, com cores, fontes e tamanhos definidos em um documento HTML. Nesse caso, bastaria você redirecionar um iframe para o nome final que foi concatenado (mesmo nome da imagem), e esse iframe abriria o HTML correspondente.

Trabalhar com sons é meio canseira também, pois o código é diferente para IE e Firefox. Não fiz para FF pois é necessário baixar um plug-in. Se fosse fazer em Flash funcionaria para ambos, bastando apenas o plug-in comum do flash player.

Bom, o som está funcionando aqui no IE7, mas não funcionou no Opera (nem FF, como dito anteriormente, por falta do bendito plug-in).

Bom, está fácil compreender o código. Se preferir, basta tirar a linhas correspondentes ao som: 30-32 e 58.

Segue o código:

<html><head>
<title>Imagem e radio buttons</title>
<script type="text/javascript">
function alterar(l,e) {
//Percorrendo o grupo X:
var objRadioX = document.forms["form1"].elements["imagemX"];
var imgX;
for(var iX = 0; iX < objRadioX.length; iX++) {
	if(objRadioX[iX].checked == true) {
		imgX = objRadioX[iX].value;
	}
}

//Percorrendo o grupo Y:
var objRadioY = document.forms["form1"].elements["imagemY"];
var imgY;
for(var iY = 0; iY < objRadioY.length; iY++) {
	if(objRadioY[iY].checked == true) {
		imgY = objRadioY[iY].value;
	}
}

//Escrevendo na tela:
var resultado = imgX + imgY + ".jpg";
document.getElementById("imgResult").innerHTML = resultado;
document.getElementById("imgResult2").innerHTML = "<img src='"+resultado+"'>";
document.getElementById("frame1").src = imgX + imgY + ".htm";
document.getElementById("htmResult").innerHTML = imgX + imgY + ".htm";

if (navigator.userAgent.indexOf("MSIE") != "-1") {
	document.getElementById("soundResult").src = imgX + imgY + ".wav";
}
}

</script>
</head>
<body onLoad="alterar()">
<form name="form1" action="pagina_php.php" method="post">
<table border="1" width="100%" height="400px">
<tr>
	<td width="30%" valign="top">Selecione a imagem X:
<br><input type="radio" name="imagemX" value="temp" onClick="alterar()">X 1</input>
<br><input type="radio" name="imagemX" value="temp" onClick="alterar()" checked>X 2</input>
<br><input type="radio" name="imagemX" value="temp" onClick="alterar()">X 3</input>
<br><input type="radio" name="imagemX" value="temp" onClick="alterar()">X 4</input>

<br><br>Selecione a imagem Y:
<br><input type="radio" name="imagemY" value="5" onClick="alterar()" checked>Y 1</input>
<br><input type="radio" name="imagemY" value="6" onClick="alterar()">Y 2</input>
<br><input type="radio" name="imagemY" value="7" onClick="alterar()">Y 3</input>
<br><input type="radio" name="imagemY" value="8" onClick="alterar()">Y 4</input>
	</td>
	<td valign="top" align="center">
	<span id="imgResult2"></span>
	<br><span id="imgResult"></span>
	<br><br>
	<br>Texto em: <span id="htmResult"></span>
	<bgsound id="soundResult" src="" loop="true">
	<br><iframe name="frame1" id="frame1" src="links.htm" width="300px" height="200px" scrolling="yes" frameborder="no"></iframe>
	</td>
</tr>
</table>
<input type="submit" value="Enviar">
</form>
</body></html>

Obs: PM significa "Privative Message", ou "Mensagem em Privado", para o MSN não ficar aqui em público! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif !

sandra_has · Fevereiro 22, 2009

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif EXCELENTE!!!!!!

Está funcionando perfeitamente!!!!! Nossa, estou super feliz!!!! Mto obrigada!!!

Vou colocar no template que montei!!!!.....lalalalala

Feliz, feliz, feliz!!!

Se eu conseguir solucionar o problema do som em firefox, postarei aqui.

p.s. Klonder, mandei uma MP para você!

Arquivado

[Resolvido] Transformar valores de radio

Recommended Posts

sandra_has 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

sandra_has 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

sandra_has 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

sandra_has 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

sandra_has 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

sandra_has 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante