+- Forum Pplware (http://forum.pplware.com)
+-- Fórum: Mais Tech (/forumdisplay.php?fid=11)
+--- Fórum: Programação e Web (/forumdisplay.php?fid=16)
+--- Tópico: JavaScript (/showthread.php?tid=6059)
JavaScript - patriciamachado - 18-05-2010 23:11
Pessoal estou com uma dúvida enorme, eu estou a comecar a "programar" em html e javascript...
Entao é assim tenho uma tabela de 5*5 e em cada célula tenho uma imagem, todas postas por ordem... e eu queria que ao clicar num botão essas imagens mudassem de posição aleatóriamente! Ja experimentei com um random... mas nao funciona! Mas também pode ser que me tenha enganado em algo! Eu tava a fazer um random célula a célula.. mas acho que se funcionasse iria repetir as imagens!
Será que alguem me poderia ajudar??? Umas ideias.. ou algo?!
RE: JavaScript - Bruno Bernardino - 18-05-2010 23:33
Boas,
Antes de mais, começa por colocar o teu código e o sítio onde estás com a dúvida (neste caso seria a "aleatoriedade" das imagens), para facilitar a nossa vida e a tua
A partir daí se vê.
RE: JavaScript - patriciamachado - 19-05-2010 16:00
<script type="text/javascript">
function baralhar(){
var i;
for (img=1;img<26;img++){
for(i=1;i<26;i++){
table.p(i)="img.src='..WEB/imagens/img'+Math.floor(25*Math.random())+'.jpg"
}
}
</script>
</head>
<body onLoad="iniciar()">
<h1>***Puzzle em JavaScript***</h1>
<table border="0" width="1200px">
<tr>
<td width="400px">
<table border="10" cellspacing="0px" cellpadding="0px";>
<tr>
<td id="p1"><img src="../WEB/imag04/img1.jpg"/></td>
<td id="p2"><img src="../WEB/imag04/img2.jpg"/></td>
<td id="p3"><img src="../WEB/imag04/img3.jpg"/></td>
<td id="p4"><img src="../WEB/imag04/img4.jpg"/></td>
<td id="p5"><img src="../WEB/imag04/img5.jpg"/></td>
</tr>
<tr>
<td id="p6"><img src="../WEB/imag04/img6.jpg"/></td>
<td id="p7"><img src="../WEB/imag04/img7.jpg"/></td>
<td id="p8"><img src="../WEB/imag04/img8.jpg"/></td>
<td id="p9"><img src="../WEB/imag04/img9.jpg"/></td>
<td id="p10"><img src="../WEB/imag04/img10.jpg"/></td>
</tr>
<tr>
<td id="p11"><img src="../WEB/imag04/img11.jpg"/></td>
<td id="p12"><img src="../WEB/imag04/img12.jpg"/></td>
<td id="p13"><img src="../WEB/imag04/img13.jpg"/></td>
<td id="p14"><img src="../WEB/imag04/img14.jpg"/></td>
<td id="p15"><img src="../WEB/imag04/img15.jpg"/></td>
</tr>
<tr>
<td id="p16"><img src="../WEB/imag04/img16.jpg"/></td>
<td id="p17"><img src="../WEB/imag04/img17.jpg"/></td>
<td id="p18"><img src="../WEB/imag04/img18.jpg"/></td>
<td id="p19"><img src="../WEB/imag04/img19.jpg"/></td>
<td id="p20"><img src="../WEB/imag04/img20.jpg"/></td>
</tr>
<tr>
<td id="p21"><img src="../WEB/imag04/img21.jpg"/></td>
<td id="p22"><img src="../WEB/imag04/img22.jpg"/></td>
<td id="p23"><img src="../WEB/imag04/img23.jpg"/></td>
<td id="p24"><img src="../WEB/imag04/img24.jpg"/></td>
<td id="p25"><img src="../WEB/imag04/pixel.gif"/></td>
</tr>
</table>
<input type="button" value="Baralhar imagens" onClick="baralhar()"/><br/><br/>
____________________________________________________
Seria algo genero isto, eu sei que nao funciona... eu sei que tem erros! mas se me conseguissem por isto a trabalhar é que era uma ajuda e tanto!!!
Acho que é a forma de indicar o que é que vai levar as imagens! "table.p(i)" ... porque eu fiz segundo um exemplo que tinha f1.resps.value=r;
RE: JavaScript - Bruno Bernardino - 19-05-2010 16:32
Ok, antes de mais, o ideal é atribuir o id às imagens e não às células, depois a função javascript seria algo deste género (não foi testado):
Código:
function baralhar(){
var i;
for(i=1;i<26;i++){
document.getElementById('p' + i).src = '..WEB/imagens/img' + Math.floor(25*Math.random()) + '.jpg';
}O problema é que com o código em cima existe uma grande probabilidade de repetires imagens e não mostrares algumas.
Se quiseres mostrar todas sem repetições e sem te esqueceres, o ideal é "baralhar" um array com os id's das imagens e depois escrever, do género:
Código:
<script type="text/javascript">
var array_imgs = Array(1,2,3,4);//-- Preencher até ao final dos ID's que pretendes
function baralhar(){
array_imgs = shuffle(array_imgs);
for(var i=0;i<array_imgs.length;i++){
document.getElementById('p' + (i + 1)).src = '..WEB/imagens/img04/img' + array_imgs[i] + '.jpg';
}
}
//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/array/shuffle [rev. #1]
shuffle = function(v){
for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
return v;
}
</script>
<h1>***Puzzle em JavaScript***</h1>
<table border="10" cellspacing="0px" cellpadding="0px";>
<tr>
<td><img id="p1" src="../WEB/imag04/img1.jpg" /></td>
<td><img id="p2" src="../WEB/imag04/img2.jpg" /></td>
<td><img id="p3" src="../WEB/imag04/img3.jpg" /></td>
<td><img id="p4" src="../WEB/imag04/img4.jpg" /></td>
</tr>
</table>
<input type="button" value="Baralhar imagens" onClick="baralhar()"/><br/><br/>Depois notei também que tens uma imagem pixel.gif, que não segue a estrutura a nível de nome igual às outras, mas com o código que coloquei agora, basta alterar os id's no array para caminhos de imagem, e substituir na atribuição do valor do atributo src só pelo array, em vez de concatenar com o caminho.
Espero ter ajudado.