SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with a script

    Hello,
    I am a new student to web design and i wanted to know if it was possible to have a java script that wont let you click a particular hyperlink until you click on 3 other ones first. In other words i wanted to make a image map with 4 buttons and 3 of them would need to be clicked on first then the final button could be clicked. I dunno if it is possible but i cant find anything over the internet to do this?? Please and Thank You for any help.

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You could record if particular buttons are clicked using JavaScript, here is some pseudocode to get you on your way

    I am assuming:

    - You have 4 links, each with an id (link1, link2, link3, link4)

    Pseudocode:
    Code JavaScript:
    linksClicked = array()
     
     
    link1.onclick = function() { linksClicked[1] = true }
    link2.onclick = function() { linksClicked[2] = true }
    link3.onclick = function() { linksClicked[3] = true }
     
    link4.onclick = function() { 
      if (linksClicked[1] == true && 
          linksClicked[2] == true &&  
          linksClicked[3] == true ) 
      { 
        //do something  (e.g. window.location = '/path/to/some/html/file.html')
      }
    }

    This is pretty rudimentary, but should get you on your way :-)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Clicking one or more links or map areas enables a link</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta name='keywords' content='javascript, click, enable, link'>
    <meta name="description" content="Javascript to enable a link only after the click of one or more other links">
    <style type='text/css'>
    body{font-family:courier}
    a:link,a:visited{color:#00f;padding:0.2em;font-weight:bold}
    a:hover{background-color:#000;color:#fff}
    </style>
    </head>
    <body>
    <p>
    <a href='#' id='trig1'>Click Me</a> &nbsp; <a href='#' id='trig2'>And Me</a> &nbsp; <a href='#' id='trig3'>And Me</a> &nbsp; <a href='http://youtube.com' id='lnk1'>Then I will work</a>
    
    <script type='text/javascript'>
    
    function linksEnableLink()
    {
     var params = linksEnableLink.arguments;
     
     function init( args )
     {
      this.elems = [];
       
      for( var i = 1, lnk, that = this, el = this.elems; i < args.length; i++ )
      {
       if( !( lnk = document.getElementById( args[ i ] ) ) )
        alert( 'Element ' + args[ i ] + ' not rendered at this point.' );
       else
       {         
        el.push( lnk );
        
        if( i === 1 )
        {
         el[ i - 1 ].defHref = args[ 0 ];  
         el[ i - 1 ].href = '';
        }
        else
         el[ i - 1 ].onclick = function(){ this.wasClicked = true; that.clickedCheck(); return false;} 
       }
      }
     
      this.clickedCheck = function()
      {
       for( var i = 1, e = this.elems, len = e.length; i < len && e[ i ].wasClicked; i++ )
       ;
       
       if( i == len )
        e[ 0 ].href = e[ 0 ].defHref;
      }   
     }
       
     new init( params );
    }
    
    linksEnableLink( 'http://youtube.com', 'lnk1', 'trig1', 'trig2', 'trig3' );
    
    </script>
    </body>
    </html>
    Tab-indentation is a crime against humanity.

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am assuming clicking each of the other 3 hotspots on your image map does not take you away from the currrent page and just runs some javascript on this page.

    Here I am using 4 links as an example (only 3 are visible initially) and the 4th becomes visible when all of the 3 other links have been clicked at least once.

    You can easily adapt this to an image map.


    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">
     
    #lnk3 {
    visibility: hidden}
    </style>
     
    <script type="text/javascript">
     
    var disabled_linkId = 'lnk3';
     
    window.onload=function() {
        // get the link objects
        linksO = document.getElementById('links_container').getElementsByTagName('a');
        //set the clicked flag for each link to false
        for(var i=0; i < linksO.length; i++) {
            linksO[i].clicked = false;
        }
    }
    function setClicked(elemId) {
        linksO[elemId.split('lnk')[1]].clicked = true; //set the clicked flag for this link to true
        //check if all 3 links have been clicked
        var allLinksClicked = true;
        for(var i=0; i < linksO.length; i++) {
           if(!linksO[i].clicked && linksO[i].id != disabled_linkId) {
             allLinksClicked = false;
                i = linksO.length;
            }
        }
     
        //show the 4th link if the other links have all been clicked
        if(allLinksClicked) {
             document.getElementById(disabled_linkId).style.visibility = 'visible';
        }
    }
     
    </script>
    </head>
    <body>
     
    <div id="links_container">
        <a id="lnk0" href="#" onclick="setClicked(this.id); return false">Link 1</a>
        <a id="lnk1" href="#" onclick="setClicked(this.id); return false">Link 2</a>
        <a id="lnk2" href="#" onclick="setClicked(this.id); return false">Link 3</a>
        <a id="lnk3" href="http://somewhere.com">Link 4</a>
    </div>
     
    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Logi Ali thank you so much, i had to mod the code a little because i wanted image mapp links, but works great, Is there any way to add more 'trig', i noticed there was 'trig'2 'trig'3 can i add more? i tried adding it to the bottom (linksEnableLink( 'http://youtube.com', 'lnk1', 'trig1', 'trig2', 'trig3'); ) but that wouldnt work, im sorry i have no prior experiance with this i was just experimenting with it.

  6. #6
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Richman118 View Post
    Logi Ali thank you so much, i had to mod the code a little because i wanted image mapp links, but works great, Is there any way to add more 'trig', i noticed there was 'trig'2 'trig'3 can i add more? i tried adding it to the bottom (linksEnableLink( 'http://youtube.com', 'lnk1', 'trig1', 'trig2', 'trig3'); ) but that wouldnt work, im sorry i have no prior experiance with this i was just experimenting with it.
    I don't know why you had to modify anything - the code works with links and/or map areas, which I presume is what you mean.

    If you want to add more enabling links just give them suitable IDs and add them as further parameters:

    Code:
    linksEnableLink( 'http://youtube.com', 'lnk1', 'trig1', 'trig2', 'trig3', 'trig4', 'trig5' );
    You can even set-up multiple independent link groups by making a separate call to linksEnableLink().

    The parameter usage is:
    linksEnableLink("URL of disabled link", "ID of disabled link", "ID of an enabling link" [, IDs of further enabling links] );

    If you can't get it working, post your URL.
    Tab-indentation is a crime against humanity.

  7. #7
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanxs its working great your the best!


Bookmarks

Posting Permissions

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