...

View Full Version : Slicing image to pieces and showing them



Thomass
08-03-2008, 12:29 PM
Hello
I've deciced to put somekind of "image riddle" to my website, but the problem is i am very beginner with javascript coding.
It is hard to me to explain what script must do, so i made image to show what i mean. Link to image. (http://xs.to/xs.php?h=xs130&d=08310&f=exampleimg277.jpg) Can somebody please show me how can i get to start, or how to complete whole script like this? I'am very glad if you help. :thumbsup:

coothead
08-03-2008, 02:41 PM
Hi there Thomass,

and a warm welcome to these forums. ;)

You can see an example here...
http://mysite.orange.co.uk/azygous/bits.html
...and the code here...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>expose image piece by piece</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#container {
position:relative;
width:400px;
height:432px;
border:3px double #666;
margin:30px auto;
}
#container img {
position:absolute;
width:400px;
height:432px;
}
#container div {
position:absolute;
width:100px;
height:108px;
background-color:#eee;
}

#d0 {left:0; top:0; }
#d1 {left:100px; top:0; }
#d2 {left:200px; top:0; }
#d3 {left:300px; top:0; }
#d4 {left:0; top:108px;}
#d5 {left:100px; top:108px;}
#d6 {left:200px; top:108px;}
#d7 {left:300px; top:108px;}
#d8 {left:0; top:216px;}
#d9 {left:100px; top:216px;}
#d10 {left:200px; top:216px;}
#d11 {left:300px; top:216px;}
#d12 {left:0; top:324px;}
#d13 {left:100px; top:324px;}
#d14 {left:200px; top:324px;}
#d15 {left:300px; top:324px;}

.remove {
display:none;
}

</style>

<script type="text/javascript">

var dvs;
var c;
var ary=[];
var ids=[];
var speed=1000;

function createRandomIds() {
dvs=document.getElementById('container').getElementsByTagName('div');
for(c=0;c<dvs.length;c++) {
ary[c]=c;
}
while(ary.length>0) {
c--
num= Math.floor(Math.random()*ary.length);
ids[c]='d'+ary[num];
ary.splice(num,1);
}
showImage();
}

function showImage() {
document.getElementById(ids[c]).className='remove';
c++;
if(c==dvs.length) {
clearTimeout(exp);
return;
}
exp=setTimeout('showImage()',speed);
}

window.onload=function() {
createRandomIds();
}
</script>

</head>
<body>

<div id="container">

<img src="images/dog.jpg" alt="">
<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>
<div id="d9"></div>
<div id="d10"></div>
<div id="d11"></div>
<div id="d12"></div>
<div id="d13"></div>
<div id="d14"></div>
<div id="d15"></div>

</div>

</body>
</html>


coothead

Thomass
08-03-2008, 03:11 PM
Thank you very much coothead! That is just what i need!

coothead
08-03-2008, 03:21 PM
No problem, you're very welcome. ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum