Colocar Resposta 
 
Avaliação do Tópico:
  • 0 votos - 0 Média
  • 1
  • 2
  • 3
  • 4
  • 5
JavaScript
18-05-2010, 23:11
Mensagem: #1
JavaScript
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?! Smile
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
18-05-2010, 23:33
Mensagem: #2
RE: JavaScript
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 Smile

A partir daí se vê.

BrunoBernardino.com
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
19-05-2010, 16:00
Mensagem: #3
RE: JavaScript
<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!!!Rolleyes

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;
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
19-05-2010, 16:32
Mensagem: #4
RE: JavaScript
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.

BrunoBernardino.com
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
Colocar Resposta 


Saltar Fórum:


Utilizadores a ver este tópico: 1 Visitante(s)