Workgroups wrote:[color=blue]
> I've got a page where the nature of the beast is such that the user clicks a
> submit button to ransomize some data in somewhat rapid succession (once per
> second, give or take). The page generates a little table, 10x10, of small
> pictures that represent the randomized data. The submit button tells the
> server (which is keeping track of which pictures are where) to scramble them
> around and output a new table. The output is simple HTML. The scrambling
> needs to occur server-side, so I can't do the obvious thing, which would be
> to simply scramble the pics around with JS. I have to do the actual
> scrambling on the server.
>[/color]
[...]
Try:
1. Create an array of image references - say your images are in a
table, use getElementsByTagName to get all the images in the table.
2. Create an array of keys and assign key:imageRef pairs to an object
3. Store the image src attributes in a source array
4. Store the keys in a key array
5. Use HTTPRequest or hidden frame to send the key array to the server
for shuffling.
6. Re-assign image src attributes based on the shuffled keys
You could save a lot of trouble if the image src array itself was
shuffled, rather than the keys, then you'd just need an array of image
references and and another of sources, shuffle the src array and
re-assign to image refs.
But I figured using keys is significantly less data to exchange and
likely much faster as a result.
The key array could be just kept in the key:ref object, then on each
shuffle it would be copied and shuffled, but having a separate array is
likely more efficient.
Initialise the objects onload and shuffle the keys. Then at a set
interval (or on some event), re-assign the images then shuffle the keys
again. That way the key shuffle/data exchange should be complete by the
time you next re-assign images.
Where the call is made to Shuffle() is where you'd do your server
communication.
<script type="text/javascript">
/* Adapted from:
http://www.merlyn.demon.co.uk/js-randm.htm#SDFS */
function Shuffle(Q) {
var R, T, J = Q.length;
while ( J-- ) {
R = Random(J + 1);
T = Q[J];
Q[J] = Q[R];
Q[R] = T;
}
return Q;
}
/* From:
http://www.merlyn.demon.co.uk/js-randm.htm#AfR */
function Random(N) {
return Math.floor(N * (Math.random() % 1));
}
// Global variables
var iSrcArray = []; // Image src to assign to refs
var iKeyArray = []; // Keys to shuffle
var keyRefObj = {}; // Holds key : ref pairs
var shuffleTimer = null;
function initImgShuffle ( sA, kA, rk, el ) {
var rA = el.getElementsByTagName( 'img' );
var i = rA.length;
while ( i-- ) {
kA[i] = 'k-' + i;
rk[ kA[i] ] = rA[i];
sA[i] = rA[i].src;
}
}
function shuffleImages( sA, kA, kr ) {
for ( var i in kA ) { kr[ kA[i] ].src = sA[i]; }
Shuffle( kA );
}
window.onload = function () {
initImgShuffle( iSrcArray, iKeyArray, keyRefObj,
document.getElementById('XX') );
Shuffle( iKeyArray );
shuffleTimer = setInterval( function() {
shuffleImages( iSrcArray, iKeyArray, keyRefObj);
}, 2000);
}
</script>
<input type="button" value="Stop shuffle" onclick="
if ( shuffleTimer ) {
window.clearInterval( shuffleTimer );
shuffleTimer = null;
}
">
<table id="XX">
<!-- Just a shortcut for putting 64 test images into the page -->
<script type="text/javascript">
var i, j, k=8, t=[];
var cS = '<td><img src="';
var cE = '" height="100" width="100"></td>';
for ( i=0; i<k; i++ ){
t.push('<tr>');
for ( j=0; j<2; j++ ) {
t.push( cS + 'a.jpg' + cE);
t.push( cS + 'b.jpg' + cE);
t.push( cS + 'c.gif' + cE);
t.push( cS + 'd.gif' + cE);
}
t.push('</tr>');
}
document.write( t.join('') );
</script>
</table>
--
Rob
