Okay so I've been working on simple button click selector/slideshow such as what you see on nbc.com for a school project. It HAS to be in plain jane javascript. I got the button selection thing working, but whenever I click one of the buttons.. the image flashes in the "content area" (an image inside an anchor tag that will change depending on which button has been pressed) and then just goes back to the default image (the source inside the original image tag). Please help. I'm kind of a novice at javascript and for the life of me I have no idea why the image isn't staying in that dang thing. I tried it without having to click on a button, just calling the function right after defining it and passing the variables and works just fine, which has me even more confused.

Here's the code:
Code:
<script type="text/javascript">
<!--
//create image array
	var tt=new Array("assets/ww.jpg","assets/discussion.gif","assets/officeSpaceSmall.jpg","assets/projects.jpg");

	function changeit(imgname,imgsrc) 
	{	
	document[imgname].src= imgsrc;
	}
//-->	
</script>


<div class="tips">
	<ul>
	<li>
		<a href="" id="l1" onclick="changeit('pic',tt[0]);"><h6>tutoring</h6></a>
	</li>
	<li>
		<a href="" id="l2" onclick="changeit('pic',tt[1]);"><h6>discussions</h6></a>
	</li>
	<li>
		<a href="" id="l3" onclick="changeit('pic',tt[2]);"><h6>workshops</h6></a>
	</li>
	<li>
		<a href="" id="l4" onclick="changeit('pic',tt[3]);"><h6>projects</h6></a>
	</li>
	</ul>
	
	<div>
	<a href=""><img src="assets/ww.jpg" name="pic" width="400" height="258" /></a>
	</div>
</div>