Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Slicing image to pieces and showing them

    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. 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.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there Thomass,

    and a warm welcome to these forums.

    You can see an example here...

    ...and the code here...
    Code:
    
    <!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

  • Users who have thanked coothead for this post:

    Thomass (08-03-2008)

  • #3
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you very much coothead! That is just what i need!

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    No problem, you're very welcome.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •