www.webdeveloper.com
Results 1 to 5 of 5

Thread: match pictures

  1. #1
    Join Date
    Jul 2013
    Posts
    16

    match pictures

    hi, anyone can help me on how to match pictures using javascript

    bird-------------> seeds
    cat-------------> milk

    so if we consider above there are four images(bird, seeds, cat, milk, for sake of convenience i am just writing names as it wil b easy to understand what i am trying to say),

    As birds feed on seeds and cat on milk. we need to match those pictures in javascript like this

    if we click on bird and then on seeds it should say "correct match" and both images needs to vanish else "not correct match and try again"

    if we click on cat and then on milk it should say "correct match" and both images needs to vanish else "not correct match and try again"

    after all are matched correctly we need to redirect to homepage...

    any help
    regards

  2. #2
    Join Date
    Jun 2008
    Posts
    106
    Here's a small example of how I would do it. Forgive my horrible CSS.

    http://pastebin.com/iFeLM136

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    
    <title>Image Match Game</title>
    
    
    <style type="text/css">
    
    body {
      background-color: #EEEEEE;
      margin: 0;
    }
    
    #match-holder {
        margin: 100px auto;
        width: 900px;
    }
    
    #match-holder IMG{
        width: 200px;height:200px;
    }
    
    
    </style>
    
    </head>
    <body>
    
    <div id="match-holder">
            <img class="birds" src="https://lh4.googleusercontent.com/-FmW-yW_iThc/UYHsbbbBK0I/AAAAAAABXGE/g_vGb4Gh7lE/w497-h373/97604-beautiful-birds-blue-bird.jpg" alt="" />
            <img class="cats" src="http://images.wisegeek.com/young-calico-cat.jpg" alt="" />
            <img class="cats" src="http://avivaromm.com/romm/wp-content/uploads/2013/07/0404_milk.jpg" alt="" />
            <img class="birds" src="http://www.communityjournal.net/wp-content/uploads/2012/05/seeds.jpg" alt="" />
        </div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcMatch={
    
     init:function(o){
      var imgs=document.getElementById(o.ParentID).getElementsByTagName('IMG'),z0=0;
      for (;z0<imgs.length;z0++){
       this.addevt(imgs[z0],'mouseup','match',o,imgs[z0]);
      }
      o.cnt=z0/2;
     },
    
     match:function(o,img){
      if (!o.lst){
       o.lst=img;
      }
      else {
       if (o.lst.className==img.className&&o.lst!=img){
        img.style.visibility=o.lst.style.visibility='hidden';
        o.cnt--;
        o.cnt==0?o.Complete():null;
       }
       else {
        alert('try again');
       }
       o.lst=null;
      }
     },
    
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcMatch.init({
     ParentID:'match-holder',
     Complete:function(){
      window.top.location='http://www.vicsjavascripts.org.uk/';
     }
    });
    /*]]>*/
    </script>
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Jul 2013
    Posts
    16
    how can i add a coundown timer of say 30 sec to above code. since i am using a coundown timer which is not working as i require. i got two pages and when i run the code, the timer already started and running in background on page 1 and in page 2 there is no countdown timer showing. i dont know how to achieve my task of showing countdown timers like a game timer for my 2 pages...

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,443

    Question

    Quote Originally Posted by kadi View Post
    how can i add a coundown timer of say 30 sec to above code. since i am using a coundown timer which is not working as i require. i got two pages and when i run the code, the timer already started and running in background on page 1 and in page 2 there is no countdown timer showing. i dont know how to achieve my task of showing countdown timers like a game timer for my 2 pages...
    It is very difficult to determine a solution to your problem without some code attempt.
    You say what you have doesn't work, but you don't show it either. Are we supposed to read you mind?

    What is the purpose of 2 pages? What is to happen when the countdown timer expires?
    What is to happen if the puzzle is solved before the time runs out?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles