Publicado em 16 de jan.

[Resolvido] Enquete Substituir radiobox por image

#javascript

Ai pessoal to achando o caminho das pedras mas preciso de uma ajuda de voces.

bom a ideia da enquete era que tivesse apenas duas images dai a pessoa clicasse na image deseja e depois votar

Exemplo:

Qual a carinha mais bonita??

:rolleyes:

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

Votar

Mas não consegui fazer como exemplo acima. então fiz assim

Qual q carinha mais bonita??

:rolleyes: O

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

Votar

Até ai beleza, mas que queria que quando clicasse na image selecionasse o radiobox e só que o meu script está mutiplicando a mesma image segue o codigo se algumen puder ajuda agradeço

<%
' Cria um conjunto de radio buttons com o valor do ID da resposta e o texto da resposta
%>

<input selected type="radio" name="resposta" value="<%=rs_enquete_respostas(0)%>"><%=rs_enquete_respostas(2)%>
<%=rs_enquete_respostas(0)%>
<br>
<%
rs_enquete_respostas.movenext
loop
%>
Valeu!!!!

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

xanburzum· 16 de jan.

na onde você esta chamando a imagem ?

e para clicar no radio e selecionar a iamgem, você vai precisar de um javascript.

e deixa ele assim:

table width="100%" border="0" cellpadding="0" cellspacing="0">

 <tr align="left" valign="middle">
 <td width="5" rowspan="2">
<INPUT name="resposta" type="radio" value="<%=rs_enquete_respostas(0)%>" checked>
 </td>
 <td><%= rs_enquete_respostas(2)%> </td>
 </tr>
 <tr align="left" valign="middle">
 <td height="2" colspan="2"><img src="assets/imagem_sua.gif" width="1" height="1"></td>
 </tr>
 </table>

Ted k'· 16 de jan.

melhor mesmo usar java script:

Movido de ASP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript / DHTML

nagaozen· 16 de jan.

Por questões de acessibilidade, é recomendável manter a versão atual, utilizando as imagens com o radio. Afinal, temos o dever de sermos justos com as "pessoas deficientes" ( Google Crawler é uma "pessoa deficiente" ). Para clicar na imagem e selecionar o radio, você pode utilizar o tag label. Ficaria assim:

<label for="best-smile"><img src="path" alt="Smile.sorrindo" title="Smile.sorrindo" /></label><input id="best-smile" name="bestSmile" type="radio" value="Sorrindo" />
Depois que você já tem o HTML semântico, você aplica seus conhecimentos em unobtrusive javascript para alterar o DOM da forma que você quiser. Pode, por exemplo, simplesmente: $("best-smile").hide() com o jQuery, ou $("best-smile").setStyle("display", "none") no Mootools.

Atenciosamente,

Fabio Zendhi Nagao (nagaozen)

W. Sales· 16 de jan.

Ai gaçlera fiz assim masnão funfa.

<%=rs_enquete_respostas(0)%>

<br>

rs_enquete_respostas.movenext

loop

Bem o script original é esse:

<label class='radio'>

<input src="../img/lado1.gif" selected type="radio" id="radio" name="resposta" value="<%=rs_enquete_respostas(2)%>">

<%=rs_enquete_respostas(0)%>

<br>

rs_enquete_respostas.movenext

loop

Ele mostra a enquete assim:

o ´Site é bonito?

O Sim

O Não

Votar

Dai eu mudei enves de colocar nas opções de resposta o texto Sim, Não eu coloco duas images foto1, foto2 ai seria assim que ficaria>

Qual a carinha mais bonita

O :mellow:

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

votar

Dai a pessao clicaria direto na imagem e selecionaria o radiobox

Mas isso ta dando uma dor de cadeça danada faz 4 dias que tento e nada

Agradeço a atenção de vocês Valeu!!!!!

klonder· 16 de jan.

Uma maneira muito simples de clicar em uma das figuras e selecionar o radio correspondente.

Testado no IE7 e Opera 9.52:

<html>
<head>
	<title>Enquete</title>

<script language="JavaScript" type="text/javascript">

<!-- //Definindo as variáveis:

var objRadio;
var i;
var checado = 0;

function selecionar(e) {
objRadio = document.forms["form1"].elements["enquete"];
	if (e==1) {
 objRadio[0].checked = true;
	}
	if (e==2) {
 objRadio[1].checked = true;
	}

}

function votar() {
objRadio = document.forms["form1"].elements["enquete"];

	for (i=0; i < objRadio.length; i++) {
 if (objRadio[i].checked == true) {
 checado = 1;
 if(confirm("Você escolheu a figura: "+(i+1)+"\nDeseja prosseguir?")) {
 document.form1.submit();
 }
 }
	}

	if (checado == 0) {
 alert("Por favor, selecione uma opção.");
 return false;
	}
}

-->

</script>

</head>

<body>
<form name="form1" action="pagina_qualquer.asp" method="post">

Selecione uma opção:

<br><img src="figura1.gif" border="0" onClick="selecionar(1)"><input type="radio" name="enquete" value="figura1"> Figura 1
<br><img src="figura2.gif" border="0" onClick="selecionar(2)"><input type="radio" name="enquete" value="figura2"> Figura 2

<br><br>
<input type="button" value="Votar" onClick="votar();">
</form>
</body>
</html>

Basta testar o código acima no seu editor HTML.

Se você não quiser a opção dos radios buttons, tem uma coisa bem bacana que você poderia fazer, que é passar um valor via campo hidden, ou seja, quando o usuário for votar, ele clica na imagem e uma função javascript joga um determinado valor em um hidden. Esse valor depois é capturado na página ASP, por exemplo.

Tem muitas maneiras mano... mas eu realmente acho que o radio button dá um aspecto melhor de enquete. É padrão.

W. Sales· 19 de jan.

caro klonder, valeu mesmo você ajudou muito brigadão!!!

podem fechar o topico