JavaScript

[Bruno Bernardino]

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.