<html>
<head>
<title>Tester Gast</title>
<style type="text/css">
.floatpic
{
position: absolute;
display: block;
overflow: hidden;
z-index: 100;
}
.label
{
position: absolute;
display: block;
z-index: 101;
background-color: #333333;
padding: 3px;
text-align: center;
font-weight: 800;
left: 10px;
color: #ffffff;
font-family: 'Verdana';
font-size: 9px;
letter-spacing: +1px;
top: 10px;
}
.masterpic { left: 10px; top: 10px; position: absolute; display: block; visibility: hidden; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script text="text/javascript">
/*
Copyright - thekid 2010 - multidesk.be
License: GPL
Please include this message in your sourcecode!
*/
var imgs = new Array();
var SLICE_COUNT_X = 20, SLICE_COUNT_Y = 10;
var label = document.createElement('div');
label.className = 'label';
label.id = 'label';
function addImg(imgurl)
{
var index = imgs.length;
imgs[index] = new Array();
imgs[index][0] = new Image();
imgs[index][0].src = imgurl;
imgs[index][1] = -5000;
imgs[index][2] = -5000;
imgs[index][3] = document.createElement('div');
imgs[index][3].id = 'image-' + index;
imgs[index][3].className = 'masterpic';
imgs[index][3].innerHTML = '<img src="' + imgurl + '" />';
document.body.appendChild(imgs[index][3]);
}
function createClips(x)
{
imgs[x][4] = new Array();
label.innerHTML = imgs[x][0].src;
label.style.width = imgs[x][3].style.width;
label.style.height = imgs[x][3].style.height;
var sh = Math.ceil(parseInt(imgs[x][3].offsetHeight) / SLICE_COUNT_Y);
var sw = Math.ceil(parseInt(imgs[x][3].offsetWidth) / SLICE_COUNT_X);
imgs[x][3].width = sw + 'px';
imgs[x][3].height = sh + 'px';
for (var wclip = 0; wclip < SLICE_COUNT_X; wclip++)
{
var clipleft = wclip * sw,
clipright = (wclip + 1) * sw;
for (var vclip = 0; vclip < SLICE_COUNT_Y; vclip++)
{
var cliptop = vclip * sh,
clipbottom = (vclip + 1) * sh;
var index = imgs[x][4].length;
imgs[x][4][index] = document.createElement('div');
document.body.appendChild(imgs[x][4][index]);
imgs[x][4][index].className = 'floatpic';
imgs[x][4][index].style.left = Math.floor(screen.width * Math.random());
imgs[x][4][index].style.top = Math.floor(screen.width * Math.random());
imgs[x][4][index].style.width = sw + 'px';
imgs[x][4][index].style.height = sh + 'px';
imgs[x][4][index].id = 'clip-' + x + '-' + wclip + '-' + vclip;
imgs[x][4][index].innerHTML = '<img src="' + imgs[x][0].src + '" style="margin-left: -' + clipleft + 'px;margin-top: -' + cliptop + 'px;" />';
}
}
moveClips(currentPic);
}
function destroyClips(x)
{
for (var i = 0; i < imgs[x][4].length; i++)
{
document.body.removeChild(imgs[x][4][i]);
}
imgs[x][4] = new Array();
createClips(currentPic);
}
var currentIndex = 0;
var rebuildAtLeft = 10, rebuildAtTop = 10;
var currentPic = 0;
var moveTimeout = 30;
var pauseTimeout = 5000;
var loops = 100;
function moveClips(x)
{
var moved = 0;
var col = 0, row = 0;
for (var i = 0; i < imgs[x][4].length; i++)
{
var distancex = parseInt(imgs[x][4][i].style.left) - parseInt(rebuildAtLeft) - (col * parseInt(imgs[x][4][i].style.width));
var distancey = parseInt(imgs[x][4][i].style.top) - parseInt(rebuildAtTop) - (row * parseInt(imgs[x][4][i].style.height));
if (Math.abs(distancex) > 5 | Math.abs(distancey) > 5)
{
moved++;
imgs[x][4][i].style.left = parseInt(imgs[x][4][i].style.left) - (distancex / (3 + Math.ceil(10 * Math.random())));
imgs[x][4][i].style.top = parseInt(imgs[x][4][i].style.top) - (distancey / (3 + Math.ceil(10 * Math.random())));
}
else
{
imgs[x][4][i].style.left = parseInt(rebuildAtLeft) + (col * parseInt(imgs[x][4][i].style.width));
imgs[x][4][i].style.top = parseInt(rebuildAtTop) + (row * parseInt(imgs[x][4][i].style.height));
}
row++;
if (row >= SLICE_COUNT_Y)
{
row = 0;
col++;
}
}
if (moved == 0)
{
setTimeout('destroyClips(' + currentPic + ');', pauseTimeout);
// switch picture
document.getElementById('image-' + currentPic).style.visibility = 'visible';
document.getElementById('image-' + ((currentPic > 0) ? currentPic - 1 : imgs.length - 1)).style.visibility = 'hidden';
currentPic++;
if (currentPic >= imgs.length)
currentPic = 0;
}
else
{
setTimeout('moveClips(' + currentPic + ');', moveTimeout);
}
}
</script>
</head>
<body>
</body>
<script type="text/javascript">
addImg('http://s.multidesk.be/events/walibi08/pics/collage.jpg');
addImg('http://s.multidesk.be/events/walibi08/pics/map.jpg');
addImg('http://s.multidesk.be/events/walibi08/pics/scan2.jpg');
addImg('http://s.multidesk.be/events/walibi08/pics/scan1.jpg');
for (var x = 38; x <= 74; x++)
if (x != 41 & x != 42 & x != 46 & x != 47)
addImg('http://s.multidesk.be/events/walibi08/pics/' + x + '.jpg');
document.body.appendChild(label);
setTimeout('createClips(0);', 1000);
</script>
</html>
't is altijd leuk om eens te kijken wat het juist doet
