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
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Minor modification to a dynamic image switcher

    Yes, it's true... I have returned

    (pause to fully take in the accalades and rejoicing...)

    Lol... alrighty. I have a little script that changes the position of an image based on links that are clicked (http://collab.concordia.ca/english.htm - click on any of the main links and the green ball moves)

    The problem arises when you click on "Eligibility", and then click the link for "here". What I want to occur, because the "here" link is actually a a link to "Contact"... is that onclick the green ball changes to the "Contact" position

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>The Social Responsiveness and Imitation Study</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script language="JavaScript" type="text/javascript" src="js/linkOverline.js"></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");
    	}
    */
    	}  
    
    </script>
    
    <script type="text/javascript">
    function ball(s){ 
    	while(s.nodeType!=1&&s.nodeName!='IMG'){ 
    		s=s.previousSibling; 
    	} 
    	var balls=document.getElementById('links').getElementsByTagName('img'); 
    	var i=0, b;
    	while(b=balls[i++]){ 
    		if(b.id!='noGreen' && b.name!="imageLinkNoTouchy"){
    			b.src='images/green_google_linkBall_blank.gif';
    		}
    	} 
    	s.src=(s.id=='normalBall')?'images/green_google_ball.gif':'images/green_google_linkBall.gif';
    }
    
    /* FOR TEXT LINKS ONLY
    =========================
    function ball(s){ 
    	while(s.nodeType!=1&&s.nodeName!='IMG'){ 
    		s=s.previousSibling; 
    	} 
    	var balls=document.getElementById('links').getElementsByTagName('img'); 
    	var i=0, b;
    	while(b=balls[i++]){ 
    		if(b.id!='noGreen'){
    			b.src='images/green_google_linkBall_blank.gif';
    		}
    	} 
    	s.src=(s.id=='normalBall')?'images/green_google_ball.gif':'images/green_google_linkBall.gif';
    }
    =========================
    */
    </script>
    
    
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    outline: 0;
    }
    html, body {
    height: 100%;
    text-align: center;
    font-family: "verdana", trebuchet ms, arial, sans-serif;
    font-size: 11px;
    background-color: white;
    overflow-x: hidden;
    }
    #pageContainer {
    min-height: 100%;
    }
    * html #pageContainer {
    height: 100%;
    }
    A:link, A:visited, A:active {
    text-decoration: none; 
    color: #0000a0;
    font-size: 10pt;
    }
    img {
    border: 0;
    }
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    #welcome {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    font-size: 14pt;
    }
    .linkBall {
    display: inline;
    position: relative;
    z-index: 5;
    margin-bottom: 4px
    }
    #links {
    float: left;
    display: inline;
    width: 265px;
    margin-top: 75px;
    position: relative;
    text-align: right;
    border-right: 1px solid #ccc;
    padding-bottom: 10px
    }
    .mainLinks {
    position: relative;
    text-decoration: none;
    margin-right: 25px;
    }
    #mainDisplay {
    position: relative;
    margin-right: 100px;
    margin-left: 260px;
    padding-left: 40px;
    }
    #mainDisplay p {
    margin-bottom: 15px;
    text-indent: 1cm
    }
    #mainDisplay ul {
    list-style:   url(images/check_ul.gif) none outside;
    padding-left: 50px;
    margin:5px 0px 2px 0px;
    }
    #mainLogo {
    display: block;
    position: relative;
    height: 287px;
    width: 450px;
    margin-top: 55px;
    }
    #information, #investigator, #expect, #eligibility, #advantagesRisks, #confidentiality, #reimbursement, #directions, #learnMore  {
    display: none;
    margin-top: 150px;
    text-align: left;
    font-size: 10pt;
    }
    #directions ul {
    list-style:   url(images/check_ul.gif) none outside;
    padding-left: 50px;
    margin:5px 0px 2px 0px;
    }
    #directions ul ul{
    list-style:   url(images/smallBull2.gif) none outside;
    padding-left: 50px;
    margin:5px 0px 2px 0px;
    }
    #intro {
    margin-left: auto;
    margin-right: auto;
    }
    #mainLogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 315px;
    width: 417px;
    padding: 20px;
    }
    .emailLinks a{
    font-size: 10pt
    }
    #formanPic {
    float: left;
    margin-right: 20px
    }
    #sarah {
    clear: both;
    height: 350px;
    width: 275px;
    position: relative;
    float: left;
    margin-right: 25px;
    margin-top: 25px;
    text-align: center;
    }
    #MP {
    display: inline;
    height: 350px;
    width: 275px;
    position: relative;
    float: right;
    margin-right: 25px;
    margin-top: 25px;
    text-align: center;
    }
    #liane {
    clear: left;
    position: relative;
    display: block;
    height: 350px;
    width: 275px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 25px
    }
    </style>
    
    </head>
    
    <body onload="zxcInit('mainLinks','#FFFFFF','#000000',15);">
    <div id="pageContainer">
    	<div id="welcome"><img src="images/En_title_bannerV2.gif"></div>
    	<div id="links">
    		<img src="images/green_google_ball.gif" id="normalBall"><a href="#intro" onclick="ball(this.previousSibling); toggle('intro', 0); return false"><img src="images/no_green_google_ball.gif" class="noGreen" name="imageLinkNoTouchy"></a>
    		<br><br>
    		<img src="images/green_google_linkBall_blank.gif" class="linkBall"><a class="mainLinks" href="#information" onclick="ball(this.previousSibling); toggle('information', 0); return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);"><img src="images/EN_information.gif" name="imageLinkNoTouchy"></a>
    		<br>
    		<img src="images/green_google_linkBall_blank.gif" class="linkBall"><a class="mainLinks" href="#investigator" onclick="ball(this.previousSibling); toggle('investigator', 0); return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);"><img src="images/EN_investigator.gif" name="imageLinkNoTouchy"></a>
    		<br>
    		<img src="images/green_google_linkBall_blank.gif" class="linkBall"><a class="mainLinks" href="#expect" onclick="ball(this.previousSibling); toggle('expect', 0); return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);"><img src="images/EN_what_to_expect.gif" name="imageLinkNoTouchy"></a>
    		<br>
    		<img src="images/green_google_linkBall_blank.gif" class="linkBall"><a class="mainLinks" href="#eligibility" onclick="ball(this.previousSibling); toggle('eligibility', 0); return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);"><img src="images/EN_eligibility.gif" name="imageLinkNoTouchy"></a>
    		<br>
    		<img src="images/green_google_linkBall_blank.gif" class="linkBall"><a class="mainLinks" href="#advantagesRisks" onclick="ball(this.previousSibling); toggle('advantagesRisks', 0); return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);"><img src="images/EN_advantages_risks.gif" name="imageLinkNoTouchy"></a>
    		<br>
    		<img src="images/green_google_linkBall_blank.gif" class="linkBall"><a class="mainLinks" href="#confidentiality" onclick="ball(this.previousSibling); toggle('confidentiality', 0); return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);"><img src="images/EN_confidentiality.gif" name="imageLinkNoTouchy"></a>
    		<br>
    		<img src="images/green_google_linkBall_blank.gif" class="linkBall"><a class="mainLinks" href="#reimbursement" onclick="ball(this.previousSibling); toggle('reimbursement', 0); return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);"><img src="images/EN_reimbursement.gif" name="imageLinkNoTouchy"></a>
    		<br>
    		<img src="images/green_google_linkBall_blank.gif" class="linkBall"><a class="mainLinks" href="#directions" onclick="ball(this.previousSibling); toggle('directions', 0); return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);"><img src="images/EN_directions.gif" name="imageLinkNoTouchy"></a>
    		<br>
    		<img src="images/green_google_linkBall_blank.gif" class="linkBall"><a class="mainLinks" href="#learnMore" onclick="ball(this.previousSibling); toggle('learnMore', 0); return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);"><img src="images/EN_Contact_Us.gif" name="imageLinkNoTouchy"></a>
    	</div>
    	<div id="mainDisplay">
    		<div id="intro">
    			<div id="mainLogo"><img src="images/Mother_Child.gif"></div>
    		</div>
    		<div id="information">
    			<p>We are studying what makes young children eager to learn through imitation. It is well understood that imitation is important for young children, both for learning skills and for learning right and wrong. We are also interested in parent-child relationships and in children’s responsiveness more generally.</p>
    			<p>This work will deepen our understanding of children’s eagerness to learn through imitation. It could also potentially inform our understanding of teaching and learning processes, and of child social responsiveness more generally.  </p>
    			<p>This study is funded by a grant from the Social Science and Humanities Research Council under the title “Social Determinants of Children's Imitation”. </p>
    
    		</div>
    		<div id="investigator">
    			<img src="images/David_Forman.jpg" id="formanPic">
    			<p>This study is directed by David R. Forman, an Assistant Professor in the
    				department of Psychology at Concordia University, and a member of the
    				Center for Research on Human Development. Dr. Forman received his PhD in
    				psychology at the University of Iowa and worked as a postdoc at the
    				University of Minnesota before coming to Montreal. In November of 2004
    				he was awarded the Canada Research Chair in Human Development (Tier 2). 
    				He has published widely in scientific journals, and was recently
    				featured on CBC Radio’s Quirks and Quarks program.  His research is
    				funded by the Social Sciences and Humanities Research Council, with
    				additional help from the Canada Research Chairs program and the Canada
    				Foundation for Innovation.  Forman is the father of 13-year-old twins.
    			</p>
    			<div class="clear"></div>
    			<p>Dr. Forman works with a team of psychology students who study
    				early-childhood development and have a great deal of experience working
    				with young children.
    			</p>	
    			<div id="sarah">
    				Sarah Vannier: Research Manager
    				<br>
    				<br>
    				<img src="images/S_Vannier.jpg">
    			</div>
    			<div id="MP">
    				Marie-Pierre Gosselin: Masters Student
    				<br>
    				<br>
    				<img src="images/MP_Gosselin.jpg">
    			</div>
    			<p></p>
    			<div id="liane">
    				Liane Kandler: Research Assistant
    				<br>
    				<br>
    				<img src="images/L_Kandler.jpg">
    				<br>
    			</div>
    		</div>
    		<div id="expect">
    			<p>If you decide to participate in our study you will be asked to come with your child to our lab at Concordia University’s Loyola campus for two visits about 1 to 2 weeks apart. Each visit will last approximately 90 minutes.</p>
    			<p>During each visit you will complete several activities with your child. All activities will be filmed. The activities are designed to observe eagerness to learn from parents, the development of child responsiveness to parents’ requests, and routine parent-child interactions. The activities are things parents often do with their children and include:</p>
    		<ul>
    			<li>Showing your child a sequence of actions to imitate</li>
    			<li>Building something together with wooden blocks</li>
    			<li>Showing your child toys which are “off-limits” and enforcing this rule throughout your visit</li>
    			<li>Asking your child to help cleanup after playing with toys</li>
    			<li>Having a snack together</li>
    			<li>Reading a story together</li>
    			<li>Completing a questionnaire about your child’s personality while your child must keep him/herself occupied</li>
    			<li>Completing a questionnaire that asks bout your well-being</li>
    		</ul>		
    		</div>
    		<div id="eligibility">
    			You are eligible for our study if:
    			<p></p>
    			<ul>
    				<li>Your child is between 24 and 30 months old</li>
    				<li>You speak to your child primarily in English or in French</li>
    				<li>You are the child’s primary caregiver (you are the parent who spends the most time with your child)</li>
    				<li>Your child has never been diagnosed with a cognitive disability</li>
    			</ul>
    			<br>
    			If you are eligible for our study, click <a href="#learnMore" onclick="toggle('learnMore', 0); return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">here</a> to contact us
    			<p></p>
    			If you are not eligible for this study, but are interested in our research, please feel free to contact us as you may be eligible for future studies.
    		</div>
    		<div id="advantagesRisks">
    			<p>With the exception of these small thank you gifts, participation in the study will provide no direct benefit to you or to your child. You should be aware that the researcher's work is designed to answer some very basic questions about early social development. Therefore what researchers are doing should not be perceived as therapy, nor will it benefit you and your child directly. Rather, the greater benefit will be to children at large. When the study is complete the researchers plan to send you a brief summary of their findings.</p>
    			<p>There are no substantial risks associated with this study. Occasionally children find some of the activities frustrating, but not any more than other activities a 2-year old would face in day to day life.</p>
    			<p>You may withdraw from participation at any time, without prejudice to your current or future relations with Concordia University. In addition, we encourage you to end any activity immediately if you think your child may be too tired or too frustrated to continue. </p>
    			<p>
    				<i class="emailLinks">If at any time you have questions about your rights as a research participant, please contact Adela Reid, Research Ethics and Compliance Officer, Concordia University, at (514) 848-7481 or by email at
    					 <script language="JavaScript" type="text/JavaScript"> 
    					<!-- 
    					var name = "areid"; 
    					var domain = "alcor.concordia.ca"; 
    					document.write('<a href="mailto:' + name + '@' + domain + '" onmouseover="window.status=\'Click here to send an e-mail to '+ name + '@' + domain+'\';return true" onmouseout="window.status=\'\'">'); 
    					document.write(name + '@' + domain + '</a>'); 
    					// --> 
    					</script>
    				</i>
    			</p>
    		</div>
    		<div id="confidentiality">
    			<p>All sessions will be videotaped.  The tapes will be used for research and/or educational purposes, and you and your child will be identified by first name and age only. All documents containing information identifying your child or yourself will remain in a locked file in the office of the coordinators (Consent forms, etc).  The tapes will be retained for seven years from the completion of the study or from publication of the results, whichever occurs later. Your name and your child's name will be withheld from all published reports of this work.</p>
    				<p>
    				<i class="emailLinks">If at any time you have questions about your rights as a research participant, please contact Adela Reid, Research Ethics and Compliance Officer, Concordia University, at (514) 848-7481 or by email at
    					<script language="JavaScript" type="text/JavaScript"> 
    					<!-- 
    					var name = "areid"; 
    					var domain = "alcor.concordia.ca"; 
    					document.write('<a href="mailto:' + name + '@' + domain + '" onmouseover="window.status=\'Click here to send an e-mail to '+ name + '@' + domain+'\';return true" onmouseout="window.status=\'\'">'); 
    					document.write(name + '@' + domain + '</a>'); 
    					// --> 
    					</script>
    				</i>
    			</p>
    		</div>
    		<div id="reimbursement">
    			<p>After each visit, as a token of our thanks, your child will receive a small gift and you will receive 20 dollars. As well, the cost of transportation can be reimbursed and free parking is available</p>
    		</div>
    		<div id="learnMore">
    			<br>To join our study, or to receive more information, contact Sarah or Marie-Pierre
    			<br>
    			<br>(514) 848-2424, ext. 5286 
    			<br>
    				<i class="emailLinks">
    					<script language="JavaScript" type="text/JavaScript"> 
    					<!-- 
    					var name = "collab"; 
    					var domain = "concordia.ca"; 
    					document.write('<a href="mailto:' + name + '@' + domain + '" onmouseover="window.status=\'Click here to send an e-mail to '+ name + '@' + domain+'\';return true" onmouseout="window.status=\'\'">'); 
    					document.write(name + '@' + domain + '</a>'); 
    					// --> 
    					</script>
    				</i>
    			
    			<br>Concordia Collaboration Lab
    			<br>PY 217-8
    			<br>7141 Sherbrooke St. Ouest
    			<br>Montréal. Quebec
    			<br>H4B 1R6
    		</div>
    	</div>
    </div>
    </body>
    </html>
    I couldn't figure out how to do this myself so I have included most of the source (excluding the Directions part), however the needed JS is at the top.

    I tried this but it failed:
    Code:
     <a href="#learnMore" onclick="toggle('learnMore', 0); return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">here</a>
    Thanks
    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
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You have to call the ball() function as this is the one that moves the ball icon from link to link. And you have to pass the corresponding image associated to the Contact Us link. And to do that, you have to get the position (which is index 17) of the img tag inside the links div.

    Code:
    <a href="#learnMore" onclick="ball(document.getElementById('links').getElementsByTagName('img')[17]); toggle('learnMore', 0); return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">here</a> to contact us
    So if you move the Contact Us link and its image, you have to update the index position in the above code.

    Or what you can do is put an id to the Contact Us link so that you can easily locate its image by using previousSibling.
    Code:
    <img src="images/green_google_linkBall_blank.gif" class="linkBall"><a id="contactus" class="mainLinks" href="#learnMore" onclick="ball(this.previousSibling); toggle('learnMore', 0); return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);"><img src="images/EN_Contact_Us.gif" name="imageLinkNoTouchy"></a>
    Code:
    <a href="#learnMore" onclick="ball(document.getElementById('contactus').previousSibling); toggle('learnMore', 0); return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">here</a> to contact us
    Last edited by glenngv; 05-16-2007 at 11:01 PM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Glenn, as always your solution is perfect

    Thank you

    (When did you move to the states btw?)
    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 :)

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Glad to help and welcome back to CF!

    (June 2006)
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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