Modo listagem | Modo Linear

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?! Smile

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 Smile

A partir daí se vê.

patriciamachado · 19-05-2010, 16:00

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;

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.