JavaScript - Make Slide In Go Over An Image

<li><a href="#" id="slidecontrol_2" class="slidecontrol">Click Here</a>
     <div id="slidedisplay_2" style="display:none;">
          <div id="thumbs7">
	<div class="thumbs">
		<div><img src="images2/img4.jpg" alt="Photo Thumb" /></div>
		<div><img src="images2/img5.jpg" alt="Photo Thumb" /></div>
		<div><img src="images2/img6.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
		<p id="thumbs_handles7">
		<span></span>
		<span></span>
		<span></span>
		</p>
</div>
     </div></li>
				
					<li><a href="#" id="slidecontrol_3" class="slidecontrol">asdf</a>
     <div id="slidedisplay_3" style="display:none;">
          <div id="thumbs7">
	<div class="thumbs">
		<div><img src="images2/img2.jpg" alt="Photo Thumb" /></div>
		<div><img src="images2/img3.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
		<p id="thumbs_handles7">
		<span></span>
		<span></span>
		</p>
</div>
     </div>

$(document).ready(function () {

	$('a.slidecontrol').click(function(){
		var $this = $(this);
		var divID = $this.attr("id").replace("slidecontrol_", "slidedisplay_");
		var $div = $('#'+divID);
		if ($div.is(':visible')) {
			$div.slideUp(500);
		} else {
			$div.slideDown(500);
		}
		return false;
	});
	
});

 #thumbs7{
	position:relative;
	width:200px;
	clear:both;
	height:41px;
	overflow:hidden;
}
#thumbs7 .thumbs, #thumbs_handles7, #thumbs_mask7{
	position:absolute;
	top:0;
	width:100%;
	height:41px;
}
#thumbs7 .thumbs div, #thumbs_handles7 span{
	display:block;
	width:60px;
	height:41px;
	margin:0;
	float:left;
	cursor:pointer;
}
#thumbs7 .thumbs div img{
	width:54px;
	float:right;
}
#thumbs_handles7 span{
	background:url(../images2/thumb_invisible.gif) no-repeat;
}
#thumbs_mask7{
	width:1200px;
	background:url(../images2/thumbs_mask.gif) no-repeat center top;
}

<script type="text/javascript">
// Simple Javascript Time based Image Swap

var Pics = new Array();

var counter = 0;


// Use this section to change the image paths
function LoadImages()
{
 Pics[1] = new Image();
 Pics[1].src = "images/pic1.jpg";
 Pics[2] = new Image();
 Pics[2].src = "images/pic2.jpg";
 Pics[3] = new Image();
 Pics[3].src = "images/pic3.jpg";
 Pics[4] = new Image();
 Pics[4].src = "images/pic4.jpg";
 Pics[5] = new Image();
 Pics[5].src = "images/pic5.jpg";
 Pics[6] = new Image();
 Pics[6].src = "images/pic6.jpg";
 Pics[7] = new Image();
 Pics[7].src = "images/pic7.jpg";
 Pics[8] = new Image();
 Pics[8].src = "images/pic8.jpg";
 Pics[9] = new Image();
 Pics[9].src = "images/pic9.jpg";
 Pics[10] = new Image();
 Pics[10].src = "images/pic10.jpg";
 Pics[11] = new Image();
 Pics[11].src = "images/pic11.jpg";
 Pics[12] = new Image();
 Pics[12].src = "images/pic12.jpg";
 Pics[13] = new Image();
 Pics[13].src = "images/pic13.jpg";
 Pics[14] = new Image();
 Pics[14].src = "images/pic14.jpg";
 Pics[15] = new Image();
 Pics[15].src = "images/pic15.jpg";
 Pics[16] = new Image();
 Pics[16].src = "images/pic16.jpg";
 Pics[17] = new Image();
 Pics[17].src = "images/pic17.jpg";

 document.pic1.src = Pics[1].src;
}
//Time in miliseconds
function timedImage()


{
counter ++
 if (counter > 17) {
   counter = 1;
 }
 document.pic1.src = Pics[counter].src;
t=setTimeout("timedImage()",5000);
}
</script>

<a class="newsletter thickbox" href="#TB_inline?height=325&amp;width=365&amp;inlineId=myOnPageContent&amp;modal=true">Subscribe to eNewsletter</a>
		<div id="myOnPageContent" class="hidden"><p>Please enter your Name:</p><p><input type="text" name="name" class="textbox"></p><p>Please enter your Email:</p><p><form action="#"><input type="text" name="email" class="textbox"></p><p>&nbsp;</p><p><input type="button" value="Send" class="thickbox" title="add a caption to title attribute / or leave blank" alt="#TB_inline?height=325&amp;width=365&amp;inlineId=myOnPageContent1">&nbsp;&nbsp;<input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></form></p></div>
		<div id="myOnPageContent1" class="hidden"><p>Thank you for subscribing</p><input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></div>

#logo
{margin-top:0px;
 margin-bottom:0px;
 margin-left:auto;
 margin-right:auto;
 width:600px;
 height:515px;}

#logo h1
{display:block;
 background:url(img/logo.jpg) no-repeat;
 width:600px;
 height:515px;
 text-indent:-10000px;
 margin:0px;}
 
#logo h1 a
 {display:block;
  width:100%;
  height:100%;}
  
#logo h1 a:hover
  {background:url(img/logo.jpg) no-repeat 0px -515px;}

        //##########################################################################//
	// Scrolling background Tutorial Code by http://www.kudoswebsolutions.com
        // Original Source code: http://youlove.us/
        // Modified and extended by Kudos Web Solutions
        // copyright 2009 kudoswebsolutions.com
        //##########################################################################//

$(function() {
	// Define the height of your two background images.
           //The image to scroll
	   var backgroundheight = 2000;
           //The image to overlay
	   var backgroundheight_two = 1000;
	// Create a random offset for both images' starting positions
        offset = Math.round(Math.floor(Math.random()* 2001));

 
	function scrollbackground() {
                //Ensure all bases are covered when defining the offset.
   		offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
		// Put the background onto the required div and animate vertically
   		$('#container3').css("background-position", "50% " + offset + "px");
   		// Enable the function to loop when it reaches the end of the image
   		setTimeout(function() {
			scrollbackground();
			}, 100
		);
   	}
	function scrollbackground2() {
                //Ensure all bases are covered when defining the offset.
   		offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
		// Put the background onto the required div and animate vertically
   		$('#container2').css("background-position", "50% " + offset + "px");
   		// Enable the function to loop when it reaches the end of the image
   		setTimeout(function() {
			scrollbackground2();
			}, 100
		);
   	}

	// Initiate the scroll
	scrollbackground();
	scrollbackground2();

	// Use the offset defined earlier and apply it to the div.
   		$('#overlay').css("background-position", "50% " + offset2 + "px");
   		$('#overlay2').css("background-position", "50% " + offset2 + "px");
});

<html>
<head> 
<script type="text/javascript">
Image.prototype.dFlake=dotFlake;
function dotFlake(xLocation,yLocation){
	this.src = "simpleDotFlake.png";	
	this.x = xLocation;
	this.y = yLocation;
}
dotFlake.prototype.move = fall;
function fall(){ // ^^ Belongs to dotFlake class.
	this.style.position="absolute";
	this.style.top = this.y;
	this.style.left = this.x;

	this.y= this.y + 1; // Falling is constant.
	if (Math.random() > 0.5){ // Random direction, though.
		this.x = this.x + 1;
	} else{
		this.x = this.x - 1;
	}	
}
function snow(flakes){ // Allows addition of different flakes later.
	for (i in flakes){
		i.move();
	}
	timer = setTimeout("snow()",1);
}
function startSnow(){
	basicFlakes = new Array(new dotFlake(0,0));
	snow(basicFlakes);	
}
</script>
</head>
<body onload="startSnow()">
	<h1>This is test text.</h1>
	<img id="basicFlake" src="./simpleDotFlake.png" width="10" height="10" />
</body>
</html>