Jump to content

[SOLVED] Slide animation?

Third_Degree

By Third_Degree
in Javascript Help

 Share

Recommended Posts

Third_Degree Newbie

Third_Degree

Posted
Posted

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?

Link to comment
https://forums.phpfreaks.com/topic/169378-solved-slide-animation/
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.