Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, sou novo por aqui, e este é meu primeiro post. Estou começando agora a mecher com WEB e como todo iniciante estou apanhando muito, para aprimorar meu aprendizado estou desenvolvendo um sisteminha de loteria, só que estou enroscado em uma parte que não consigo mais evoluir e gostaria da ajuda de vocês.
/applications/core/interface/imageproxy/imageproxy.php?img=http://nake.sites.uol.com.br/rafanake_checkbox.png&key=176c6619e00b7599ad0d568238a805fd5c4f169a5767d1f0e4991b66286c108a" alt="Imagem Postada" />
Na imagem acima eu consegui substituir o checkbox por uma imagem usando CSS, mas oque eu estou precisando é conseguir trocar as outras checkboxes (5 ao todo) pelas respectivas imagens 2, 3, 4, 5. Fiz uma montagem no PS pra entenderem o resultado que eu estou buscando.
/applications/core/interface/imageproxy/imageproxy.php?img=http://nake.sites.uol.com.br/rafanake_checkbox1.png&key=4aa37fab697c397dcbefe0c8a7173e3e4baa9f9e05c9f1f519e47b83c155c3f0" alt="Imagem Postada" />
É isso, onde cada numero seria uma checkbox. Tentei utilizando o CSS mas se alguem souber algum jeito de fazer isso pode ser em jscript ou qualquer outra coisa.
Segue o codigo que cheguei até o momento:
<html>
<head>
<title>Teste CheckBox</title>
<style>
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
background: url('1u.png') 0 0px no-repeat;
height: 35px;
width: 25px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label {
background: url('1c.png') 0 0px no-repeat;
height: 35px;
width: 25px;
display:inline-block;
padding: 0 0 0 0px;
}
</style>
</head>
<body>
<div>
<p align="center">
<input type='checkbox' name='cb01' value='1' id="cb01"/> <label for="cb01"></label>
<input type='checkbox' name='cb02' value='1' id="cb02"/> <label for="cb02"></label>
<input type='checkbox' name='cb03' value='1' id="cb03"/> <label for="cb03"></label>
<input type='checkbox' name='cb04' value='1' id="cb04"/> <label for="cb04"></label>
<input type='checkbox' name='cb05' value='1' id="cb05"/> <label for="cb05"></label>
</p>
</div>
</body>
</html>Preciso de uma luz! Abraços
Obrigado Gebezin, mas não consegui usar isso não :(
Porque não faz com Javascript?
<form action="" method="post" id="loteria">
<fieldset></fieldset>
<button type="submit">Apostar!</button>
</form>#loteria input { display: none; }
var Options = new Array();var createNumber(n, into){
var img = document.createElement('img');
var opt = document.createElement('input');
img.src = n + '.jpg';
img.alt = n;
opt.name = 'numero[]';
opt.type = 'checkbox';
opt.value = n;
img.checked = false;
img.onclick = function(){
if(opt.checked){
img.src = n + '.jpg';
opt.checked = false;
Options.splice(array_find(n, Options));
}
else if(Options.length < 6) {
img.src = n + '_check.jpg';
opt.checked = true;
Options.push(n);
}
into.appendChild(img);
into.appendChild(opt);
}
window.onload = function(){
var frm = document.getElementById('loteria').getElementsByTagName('fieldset').item(0);
for(var i = 1; i < 61; i++) new createNumber(i, frm);
}Obrigado Evandro, mas esta dando um erro na linha:
var createNumber(n, into){
pelo debug do chrome o erro é:
Uncaught SyntaxError: Unexpected token (
o codigo que estou usando é esse
<html>
<head>
<style></style>
</head>
<body>
<form action="" method="post" id="loteria">
<fieldset></fieldset>
<button type="submit">Apostar!</button>
</form>
<script language="JavaScript" type="text/javascript">
var Options = new Array();var createNumber (n, into){
var img = document.createElement('img');
var opt = document.createElement('input');
img.src = n + 'u.png';
img.alt = n;
opt.name = 'numero[]';
opt.type = 'checkbox';
opt.value = n;
img.checked = false;
img.onclick = function(){
if(opt.checked){
img.src = n + 'u.png';
opt.checked = false;
Options.splice(array_find(n, Options));
}
else if(Options.length < 6) {
img.src = n + 'c.png';
opt.checked = true;
Options.push(n);
}
into.appendChild(img);
into.appendChild(opt);
}
window.onload = function(){
var frm = document.getElementById('loteria').getElementsByTagName('fieldset').item(0);
for(var i = 1; i < 61; i++) new createNumber(i, frm);
}
</script>
</body>
</html>var createNumber = function(n, into){
Pequeno deslize meu. Testei uma versão e enviei a outra.
<html>
<head>
<style></style>
</head>
<body>
<form action="" method="post" id="loteria">
<fieldset>
</fieldset>
<button type="submit">Apostar!</button>
</form>
<script language="Javascript" type="text/javascript">
var Options = new Array();
var createNumber = function(n, into){
var img = document.createElement('img');
var opt = document.createElement('input');
img.src = n + 'u.png';
img.alt = n;
opt.name = 'numero[]';
opt.type = 'checkbox';
opt.value = n;
img.checked = false;
img.onclick = function(){
if(opt.checked){
img.src = n + 'u.png';
opt.checked = false;
Options.splice(array_find(n, Options));
}
else if(Options.length < 6) {
img.src = n + 'c.png';
opt.checked = true;
Options.push(n);
}
into.appendChild(img);
into.appendChild(opt);
}
window.onload = function(){
var frm = document.getElementById('loteria').getElementsByTagName('fieldset').item(0);
for(var i = 1; i < 61; i++) new createNumber(i, frm);
}
}</script>
</body>
</html>Pq será que não ta indo?
Troque
Options.push(n);
por
Options.push(n);
}
e remova a última chave antes da tag </script>Agora foi, mto obrigado mesmo Evandro!
CheckBox Jquery, foi até bom você falar, fez eu pesquisar, estava precisando tb xD
(: