Help with a script

JavaScript
1

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

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:


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 :slight_smile:

3 
<!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>
4

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.

 
<!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](http://somewhere.com%22%3elink/) 4</a>
</div>
 
</body>
</html>
5

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

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:

linksEnableLink( 'http://youtube.com', 'lnk1', 'trig1', 'trig2', 'trig3', [B]'trig4', 'trig5'[/B] );

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.

7

Thanxs its working great your the best!