[SOLVED] Slide animation?

[Third_Degree]

Here is the relevant code to my problem.  I know it's a lot, and if you don't feel like reading it I understand.

 

<style type="text/css">
#slideshow {
width:635px;
height:455px;
z-index:1;
}
#main {
background-image:url('1.jpg');
width:635px;
height:360px;
z-index:2;
}
#placehold {
background-color:transparent;
height:300px;
z-index:3;
}
.placeholdthumb {
background-color:transparent;
height:49px;
z-index:5;
}
.captionthumb {
height:16px;
background-color:black;
color:white;
text-align:center;
font-family:Helvetica, Arial, sans-serif;
font-size:14px;
opacity:0.7;
filter:alpha(opacity=70);
cursor:pointer;
}
#caption {
background-image:url('captbg.gif');
background-repeat:no-repeat;
color:white;
font-size:16px;
font-weight:bold;
opacity:0.8;
filter:alpha(opacity=80);
height:50px;
z-index:3;
font-family:Helvetica, Arial, sans-serif;
padding-left:11px;
}
#roll {
text-align:center;
line-height:11px;
width:635px;
margin-left:auto;
margin-right:auto;
background-image:url('rollbg.png');
height:95px;
z-index:2;
}
.piccell {
padding:3px;
line-height:normal;
}
</style>
<div id="slideshow">
<div id="main">
<div id="placehold">
</div>
<div id="caption">
<table height="100%" width="100%">
<tr><td style="width:80%;padding-left:5px;"><span id="captiontext">This is a caption</span></td><td style="width:20%"><img src="images/searchHv_btn.gif" alt="Search" /></td></tr>
</table>
</div>
</div>
<div id="roll">
<br />
<center>
<table><tr>
<td class="piccell"><div id="1" alt="Caption1" style="width:95px;height:65px;border:1px solid #222;opacity:0.5;filter:alpha(opacity=50);background-Image:url('1thumb.jpg');cursor:pointer"  onmouseover="highlight('1');" onmouseout="unhighlightcondition('1');" onclick="selectpic('1');">
<div class="placeholdthumb" id="place1"></div><div class="captionthumb" id="1thumb"></div></div></td>
<td class="piccell"><div id="2" alt="Caption2" style="width:95px;height:65px;border:1px solid #222;opacity:0.5;filter:alpha(opacity=50);background-Image:url('2thumb.jpg');cursor:pointer" onmouseover="highlight('2');" onmouseout="unhighlightcondition('2');" onclick="selectpic('2');">
<div class="placeholdthumb" id="place2"></div><div class="captionthumb" id="2thumb"></div></div></td>
<td class="piccell"><div id="3" alt="Caption3" style="width:95px;height:65px;border:1px solid #222;opacity:0.5;filter:alpha(opacity=50);background-Image:url('3thumb.jpg');cursor:pointer" onmouseover="highlight('3');" onmouseout="unhighlightcondition('3');" onclick="selectpic('3');">
<div class="placeholdthumb" id="place3"></div><div class="captionthumb" id="3thumb"></div></div></td>
<td class="piccell"><div id="4" alt="Caption4" style="width:95px;height:65px;border:1px solid #222;opacity:0.5;filter:alpha(opacity=50);background-Image:url('4thumb.jpg');cursor:pointer" onmouseover="highlight('4');" onmouseout="unhighlightcondition('4');" onclick="selectpic('4');">
<div class="placeholdthumb" id="place4"></div><div class="captionthumb" id="4thumb"></div></div></td>
<td class="piccell"><div id="5" alt="Caption5" style="width:95px;height:65px;border:1px solid #222;opacity:0.5;filter:alpha(opacity=50);background-Image:url('5thumb.jpg');cursor:pointer" onmouseover="highlight('5');" onmouseout="unhighlightcondition('5');" onclick="selectpic('5');">
<div class="placeholdthumb" id="place5"></div><div class="captionthumb" id="5thumb"></div></div></td>
<td class="piccell"><div id="6" alt="Caption6" style="width:95px;height:65px;border:1px solid #222;opacity:0.5;filter:alpha(opacity=50);background-Image:url('6thumb.jpg');cursor:pointer" onmouseover="highlight('6');" onmouseout="unhighlightcondition('6');" onclick="selectpic('6');">
<div class="placeholdthumb" id="place6"></div><div class="captionthumb" id="6thumb"></div></div></td>
</tr></table>
</center>
</div>
</div>
<script type="text/javascript">
captions = new Array( );
captions[0] = '';
captions[1] = 'Mountain';
captions[2] = 'Cat';
captions[3] = 'Frog on Lily Pads';
captions[4] = 'The Lake at Night';
captions[5] = 'Red Rose';
captions[6] = 'Dog';
descriptions = new Array( );
descriptions[0] = '';
descriptions[1] = 'This is a description of the Mountain';
descriptions[2] = 'This is a description of the cat';
descriptions[3] = 'This is a description of the Frog on Lily Pads';
descriptions[4] = 'This is a description of the The Lake at Night';
descriptions[5] = 'This is a description of the Red Rose';
descriptions[6] = 'This is a description of the Dog';
function highlight( id ) {
var captdiv = id+"thumb";
var placediv = "place"+id;
document.getElementById(placediv).style.height = '35px';
document.getElementById(captdiv).style.height = '30px';
document.getElementById(captdiv).style.fontSize = '12px';
document.getElementById(captdiv).innerHTML = captions[id];
if ( navigator.appName == "Microsoft Internet Explorer" ) {
	document.getElementById(id).filters.alpha.opacity = 100;
} else {
	document.getElementById(id).style.opacity = 1;
}
}
function unhighlight( id ) {
var captdiv = id+"thumb";
var placediv = "place"+id;
document.getElementById(placediv).style.height = '49px';
document.getElementById(captdiv).style.height = '16px';
document.getElementById(captdiv).style.fontSize = '14px';
document.getElementById(captdiv).innerHTML = captions[id].substr( 0,6 )+'...';
if ( navigator.appName == "Microsoft Internet Explorer" ) {
	document.getElementById(id).filters.alpha.opacity = 50;
} else {
	document.getElementById(id).style.opacity = 0.5;
}
document.getElementById(id).style.border = '1px solid #222';
}
function unhighlightcondition( id ) {
var up = document.getElementById("main").style.backgroundImage;
if ( up.length > 8 ) {
	var idx = up.charAt(up.length - 6);
} else {
	var idx = up.charAt(4);
}
if ( idx == id ) {
	return true;
} else {
	var captdiv = id+"thumb";
	document.getElementById(captdiv).style.fontSize = '14px';
	document.getElementById(captdiv).innerHTML = captions[id].substr( 0,6 )+'...';
	var placediv = "place"+id;
	document.getElementById(placediv).style.height = '49px';
	document.getElementById(captdiv).style.height = '16px';
	if ( navigator.appName == "Microsoft Internet Explorer" ) {
		document.getElementById(id).filters.alpha.opacity = 50;
	} else {
		document.getElementById(id).style.opacity = 0.5;
	}
	document.getElementById(id).style.border = '1px solid #222';
}
}
function switchpic( pic ) {
document.getElementById("main").style.backgroundImage = "url("+pic+".jpg)";
document.getElementById(pic).style.border = '1px solid white';
}
function captiontext(text) {
document.getElementById("captiontext").innerHTML = captions[text]+"<br /><span style='font-size:12px;font-weight:normal'>"+descriptions[text]+"</span>";
}
function selectpic( pic,text ) {
var list = new Array();
switch( pic ) {
	case '1':
	list[0] = '2';
	list[1] = '3';
	list[2] = '4';
	list[3] = '5';
	list[4] = '6';
	break;
	case '2':
	list[0] = '1';
	list[1] = '3';
	list[2] = '4';
	list[3] = '5';
	list[4] = '6';
	break;
	case '3':
	list[0] = '2';
	list[1] = '1';
	list[2] = '4';
	list[3] = '5';
	list[4] = '6';
	break;
	case '4':
	list[0] = '2';
	list[1] = '3';
	list[2] = '1';
	list[3] = '5';
	list[4] = '6';
	break;
	case '5':
	list[0] = '2';
	list[1] = '3';
	list[2] = '4';
	list[3] = '1';
	list[4] = '6';
	break;
	case '6':
	list[0] = '2';
	list[1] = '3';
	list[2] = '4';
	list[3] = '5';
	list[4] = '1';
	break;
}
for ( i = 0; i < 5; i++ ) {
	unhighlight(list[i]);
}
switchpic(pic);
captiontext(pic);
clearTimeout(timeout);
timeout = setTimeout( "cycle()", 5000 );
}
function cycle( ) {
var numb = 1;
var current = document.getElementById("main").style.backgroundImage;
if ( current.length < 8 ) {
	if ( current != '' && current != "url(6.jpg)" ) {
		var numb = current.charAt(4);
		var numb = parseInt(numb) + 1;
	}
} else {
	if ( current != '' ) {
		var numb = current.charAt(current.length - 6);
		var numb = parseInt(numb) + 1;
		if ( numb == 7 ) {
			numb = 1;
		}
	}
}
var onumb = ( numb - 1 != 0 ) ? numb - 1 : 6;
switchpic(numb);
captiontext(numb);
highlight(numb);
unhighlight(onumb);
timeout = setTimeout( "cycle()", 5000 );
}
function start( ) {
for ( i = 1; i < 7; i++ ) {
	var div = i+"thumb";
	document.getElementById(div).innerHTML = captions[i].substr( 0,6 )+'...';
}
cycle( );
}
onload = function ( ){ start( ) };
</script>

 

As it stands now, the captions on highlighted pictures simply get larger in an instant.  However, this is not good enough for my brother (my non-paying client...).  I've tried all manner of increment the height and width of the placediv and captdiv elements with setInterval and setTimeout, but to no avail.  This is basically a shameless ask for help.  Could someone show me what I need to do in order to have the captions slide up/down?

[abazoskib]

can you show a working example?

[Third_Degree]

Thanks for your interest, but I've decided to switch to flash and everything is now working