Web Analytics Made Easy -
StatCounter simple onlick object display script needed - CodingForum

Announcement

Collapse
No announcement yet.

simple onlick object display script needed

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • simple onlick object display script needed

    Hey,

    I have an 'indicator image' which I would like to appear infront of whatever link is currently active.

    here's what i have:
    Code:
    	<div id="links">
    		<div id="greenBall"><img src="images/green_google_ball.gif"></div>
    		<img src="images/no_green_google_ball.gif">
    		<br><br>
    		<a class="mainLinks" href="#Link2" onclick="return toggle('Link2', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 2</a>
    		<br>
    		<a class="mainLinks" href="#Link3" onclick="return toggle('Link3', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 3</a>
    		<br>
    		<a class="mainLinks" href="#Link4" onclick="return toggle('Link4', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 4</a>
    		<br>
    		<a class="mainLinks" href="#Link5" onclick="return toggle('Link5', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 5</a>
    	</div>
    I want the green ball div to start out right beside the <img src="images/no_green_google_ball.gif"> (which is the home page)... and whenever a link is clicked i want it to appear beside the link (aka go up or down)

    whats the best approach to do this?

    you can see the initial layout of the page before any links are clicked here: www.enviromark.ca/Collab/index.html

    Thanks again
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Like this?:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    <!--
    .vis{
    visibility:visible;
    }
    .hid{
    visibility:hidden;
    }
    -->
    </style>
    <script type="text/javascript">
    function ball(s){
    while(s.nodeType!=1){
    s=s.previousSibling;
    }
    var balls=document.getElementById('links').getElementsByTagName('img');
    var i=0, b
    while(b=balls[i++]){
    b.className=b==s?'vis':'hid';
    }
    }
    </script>
    </head>
    <body>
    <div id="links">
    <img src="images/google_ball.gif" class="vis">	<a href="#" onclick="ball(this.previousSibling);return false">Link 1</a>
    <br>
    <br>
    <img src="images/google_ball.gif" class="hid">	<a href="#" onclick="ball(this.previousSibling);return false">Link 2</a>
    <br>
    <br>
    <img src="images/google_ball.gif" class="hid">	<a href="#" onclick="ball(this.previousSibling);return false">Link 3</a>
    	</div>
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

    Comment


    • #3
      { see next post }

      Hey Kor,

      Thanks, thats what i need. unfortunantly i can't make it work

      I also decided to try and impliment your div toggler, so maybe that is what went wrong.

      Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
      <head>
      <title>The Concordia Collaboration Lab</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      
      <script language="JavaScript" type="text/javascript" src="../js/borderFade.js"></script>
      <script type="text/javascript"> \
      function showhide(id){
      var i=1,d=document.getElementById(id),divs
      while(divs=document.getElementById('Link'+i++)){
      divs.style.display=divs==d?'block':'none';
      }
      }
      onload=function(){
      showhide('Link1')
      }
      </script>
      
      
      <script type="text/javascript">
      function ball(s){
      while(s.nodeType!=1){
      s=s.previousSibling;
      }
      var balls=document.getElementById('links').getElementsByTagName('img');
      var i=0, b
      while(b=balls[i++]){
      b.className=b==s?'vis':'hid';
      }
      }
      </script>
      
      
      <style type="text/css">
      * {
      padding: 0;
      margin: 0;
      }
      html, body {
      height: 100%;
      text-align: center;
      font-family: "verdana", trebuchet ms, arial, sans-serif;
      font-size: 11px;
      background-color: white;
      }
      #pageContainer {
      min-height: 100%;
      }
      * html #pageContainer {
      height: 100%;
      }
      A:link, A:visited, A:active {
      text-decoration: none; 
      color: blue;
      }
      #birds {
      float: right;
      z-index: -2;
      position: absolute;
      display: inline;
      margin-left: 100px
      }
      .mainLinks {
      position: relative;
      text-decoration: none;
      margin-left: 25px;
      margin-right: 25px;
      }
      #welcome {
      margin-left: auto;
      margin-right: auto;
      margin-top: 50px;
      margin-bottom: 50px;
      position: relative;
      font-size: 14pt;
      }
      #links {
      float: left;
      display: inline;
      height: 100px;
      width: 125px;
      margin-left: 50px;
      margin-top: 75px;
      position: relative;
      text-align: left;
      border-right: 1px #ccc solid;
      line-height: 0.7cm
      }
      #mainDisplay {
      position: relative;
      margin-right: 100px;
      margin-left: 175px
      }
      #mainLogo {
      display: block;
      margin-left: auto;
      margin-right: auto;
      position: rel
      ative;
      height: 300px;
      width: 210px;
      padding: 20px;
      }
      #Link2, #Link3, #Link4, #Link5  {
      display: none;
      }
      .vis{
      visibility:visible;
      }
      .hid{
      visibility:hidden;
      }
      </style>
      
      
      </head>
      
      <body onload="zxcInit('mainLinks','#FFFFFF','#000000',15)">
      <div id="pageContainer">
      	<div id="welcome">Welcome to the Concordia Collaboration Lab</div>
      	<div id="links">
      		<img src="../images/green_google_ball.gif" class="vis">
      		<img src="../images/no_green_google_ball.gif">
      		<br><br>
      		<img src="../images/green_google_ball.gif" class="hid">
      		<a class="mainLinks" onclick="showhide('Link2'); ball(this.previousSibling);return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 2</a>
      		<br>
      		<img src="../images/green_google_ball.gif" class="hid">
      		<a  class="mainLinks" onclick="showhide('Link3'); ball(this.previousSibling);return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 3</a>
      		<br>
      		<img src="../images/green_google_ball.gif" class="hid">
      		<a  class="mainLinks" onclick="showhide('Link4'); ball(this.previousSibling);return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 4</a>
      		<br>
      		<img src="../images/green_google_ball.gif" class="hid">
      		<a  class="mainLinks" onclick="showhide('Link5'); ball(this.previousSibling);return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 5</a>
      	</div>
      	<div id="mainDisplay">
      		<div id="birds"><img src="../images/birds.gif"></div>
      		<div id="mainLogo"><img src="../images/toddler.gif"></div>
      		<div id="Link2">Link 2</div>
      		<div id="Link3">Link 3</div>
      		<div id="Link4">Link 4</div>
      		<div id="Link5">Link 5</div>
      	</div>
      </div>
      </body>
      </html>
      oh, i should point out that while the code indicates my divs as sequential (link1, link2, link3, etc)... when i get the scripts functional those will change to actual link names like (contact, about, etc). i saw thay the script used the sequential names, so i figured that needed addressing
      Last edited by canadianjameson; Sep 28, 2006, 01:39 AM.
      Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

      Comment


      • #4
        updates

        Hey.

        I got the other div toggler working so thats alright.

        i made some changes to the page so here they are. the script as it stands now doesnt work for more than one reason. the one conflict i found is here:

        Code:
        ...
        var balls=document.getElementById('links').getElementsByTagName('img');
        ....
        with regard to
        <div id="links">
        	<img src="images/green_google_ball.gif" class="vis">
        	<a href="#intro" onclick="return toggle('intro', 0); ball(this.previousSibling);">
        	<img src="images/no_green_google_ball.gif" border="0"></a>
        </div>
        i have a second image in the 'links' div that needs to be excluded from the script effects, so catching all instances of the tagname 'img' within the div 'links' wont work

        that being said, even when I took out the second image, the script didn't work

        any ideas?

        you can see it here: www.enviromark.ca/Collab/index.html

        and the code is here:
        Code:
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        <html>
        <head>
        <title>The Concordia Collaboration Lab</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        
        <script language="JavaScript" type="text/javascript" src="js/borderFade.js"></script>
        
        <script type="text/javascript">
        function ball(s){
        while(s.nodeType!=1){
        s=s.previousSibling;
        }
        var balls=document.getElementById('links').getElementsByTagName('img');
        var i=0, b
        while(b=balls[i++]){
        b.className=b==s?'vis':'hid';
        }
        }
        </script>
        
        <script type="text/javascript"> 
          var arrPrevDiv = [null, null];
        
          function toggle(id, linkGroup) {
        
        	if (arrPrevDiv[linkGroup] != null) {
        		arrPrevDiv[linkGroup].style.display = "none"; 
        	}         
        
        	var s = document.getElementById(id);
        				
        	if (id != 'intro') {
        		document.getElementById("intro").style.display = "none"	
        		}
        		
        	s.style.display = (s.style.display=="") ? "block" : (s.style.display=="none") ? "block" : "none"; 
        	arrPrevDiv[linkGroup] = s; 
        	// window.location.href='#'+ id;
        	window.status=''
        
        /* if (linkGroup==0 && arrPrevDiv[1] && arrPrevDiv[1].id=="stopShow") { 
         		alert("Please stop the slideshow before continuing.");
        	 	return false; 
        	} 
        	
        	window.onload = function(){
        	arrPrevDiv[1] = document.getElementById("startShow");
        	}
        	<a href="#intro" onclick="return toggle('intro', 0);"><img src="images/google_ball.gif" border="0"></a>
        */
        	}  
        
        </script>
        
        
        <style type="text/css">
        * {
        padding: 0;
        margin: 0;
        }
        html, body {
        height: 100%;
        text-align: center;
        font-family: "verdana", trebuchet ms, arial, sans-serif;
        font-size: 11px;
        background-color: white;
        }
        #pageContainer {
        min-height: 100%;
        }
        * html #pageContainer {
        height: 100%;
        }
        A:link, A:visited, A:active {
        text-decoration: none; 
        color: #0000a0;
        font-size: 8pt
        }
        #welcome {
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
        margin-bottom: 50px;
        position: relative;
        font-size: 14pt;
        }
        #links {
        float: left;
        display: inline;
        width: 100px;
        margin-left: 75px;
        margin-top: 75px;
        position: relative;
        text-align: right;
        border-right: 1px #ccc solid;
        line-height: 0.7cm;
        padding-bottom: 10px
        }
        .mainLinks {
        position: relative;
        text-decoration: none;
        margin-left: 25px;
        margin-right: 25px;
        }
        #mainDisplay {
        position: relative;
        margin-right: 100px;
        margin-left: 175px
        }
        #mainLogo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        height: 315px;
        width: 417px;
        padding: 20px;
        }
        #Link2, #Link3, #Link4, #Link5  {
        display: none;
        }
        #intro {
        margin-left: 205px;
        margin-top: -25px
        }
        #mainLogo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        height: 315px;
        width: 417px;
        padding: 20px;
        }
        .vis{
        visibility:visible;
        }
        .hid{
        visibility:hidden;
        display: inline;
        position: absolute;
        z-index: -2
        }
        </style>
        
        
        </head>
        
        <body onload="zxcInit('mainLinks','#FFFFFF','#000000',15)">
        <div id="pageContainer">
        	<div id="welcome">Welcome to the Concordia Collaboration Lab</div>
        	<div id="links">
        		<img src="images/green_google_ball.gif" class="vis"><a href="#intro" onclick="return toggle('intro', 0); ball(this.previousSibling);"><img src="images/no_green_google_ball.gif" border="0"></a>
        		<br><br>
        		<img src="images/green_google_ball.gif" class="hid"><a class="mainLinks" href="#Link2" onclick="return toggle('Link2', 0); ball(this.previousSibling);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 2</a>
        		<br>
        		<img src="images/green_google_ball.gif" class="hid"><a class="mainLinks" href="#Link3" onclick="return toggle('Link3', 0); ball(this.previousSibling);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 3</a>
        		<br>
        		<img src="images/green_google_ball.gif" class="hid"><a class="mainLinks" href="#Link4" onclick="return toggle('Link4', 0); ball(this.previousSibling);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 4</a>
        		<br>
        		<img src="images/green_google_ball.gif" class="hid"><a class="mainLinks" href="#Link5" onclick="return toggle('Link5', 0); ball(this.previousSibling);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Link 5</a>
        	</div>
        	<div id="mainDisplay">
        		<div id="intro">
        			<div id="mainLogo"><img src="images/happy.gif"></div>
        		</div>
        		<div id="Link2">Link 2</div>
        		<div id="Link3">Link 3</div>
        		<div id="Link4">Link 4</div>
        		<div id="Link5">Link 5</div>
        	</div>
        </div>
        </body>
        </html>
        Last edited by canadianjameson; Sep 28, 2006, 01:53 AM.
        Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

        Comment


        • #5
          try this:

          var i=0, b
          while(b=balls[i]){
          b.className=b==s?'vis':'hid';
          i+=2;
          }
          KOR
          Offshore programming
          -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

          Comment


          • #6
            no luck

            Code:
            <script type="text/javascript">
            function ball(s){
            while(s.nodeType!=1){
            s=s.previousSibling;
            }
            var balls=document.getElementById('links').getElementsByTagName('img');
            var i=0, b
            while(b=balls[i]){
            b.className=b==s?'vis':'hid';
            i+=2;
            }
            
            }
            it doesnt work did i impliment it wrong?
            Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

            Comment


            • #7
              Hey,

              can someone help me with this... i know the error is small but i do need this functional soon

              alternatively if you have another script that does the same thing i'm open to that
              Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

              Comment

              Working...
              X