[RESOLVED] adding text box below rotating images

**rawlins02** · 09-28-2011 03:49 PM

Following the guide here:

http://javascript.internet.com/image...ing-image.html

I've got a series of photos rotating in sequence every few seconds. My page is here:

http://www.geo.umass.edu/climate/

I've got one file called banner.js.js with the code shown at bottom of this post. In my main index.html file I have the few lines immediately below. How do I place a caption below images that changes for each photo? Most of the code I've seen to do this seems MUCH more complicated. I'd like to stick with what I have working. Thanks!

<p><div align="center">

<img src="photo_JBG_0315.JPG" name="banner" width="400" height="267">
<div class="slideTitle"> CAPTION TEXT
</div>
</div><p>



/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Lee Underwood :: http://javascript.internet.com/ */

var bannerImg = new Array();
// Enter the names of the images below
bannerImg[0]="photo_JBG_0315.JPG";
bannerImg[1]="photo_JBG_3341.JPG";
bannerImg[2]="photo_JBG_3506.JPG";

var newBanner = 0;
var totalBan = bannerImg.length;

function cycleBan() {
newBanner++;
if (newBanner == totalBan) {
newBanner = 0;
}
document.banner.src=bannerImg[newBanner];
// set the time below for length of image display
// i.e., "4*1000" is 4 seconds
setTimeout("cycleBan()", 8*1000);
}
window.onload=cycleBan;

**xelawho** · 09-28-2011 11:54 PM

I tried to keep as much of the original code as possible, but it got a little complicated. Anyway - it's the same concept, just rotating divs instead of images...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<style>
.hide{
display:none;
}
</style>
<div id="banner"></div>
<div class="hide" id="div0"><img src="photo_JBG_0315.JPG"><div class="slideTitle"> CAPTION ONE TEXT</div></div>
<div class="hide" id="div1"><img src="photo_JBG_3341.JPG"><div class="slideTitle"> CAPTION TWO TEXT</div></div>
<div class="hide" id="div2"><img src="photo_JBG_3506.JPG"><div class="slideTitle"> CAPTION THREE TEXT</div></div>

<script type="text/javascript">
var newBanner = 0;
var shown;

function cycleBan() {
if (shown) {
document.getElementById("div"+shown).style.display="none";
} else  {
document.getElementById("div0").style.display="none";
}
newBanner++;
if (newBanner == 3) {
newBanner = 0;
}

document.getElementById("div"+newBanner).style.display="block";
shown=newBanner;
// set the time below for length of image display
// i.e., "4*1000" is 4 seconds
setTimeout("cycleBan()", 2*1000);
}
window.onload=cycleBan; 
</script>

</body>
</html>

**rawlins02** · 09-29-2011 07:22 AM

Thank you xelawho. Very nice! I've even just gotten the photos centered and the caption aligned left.

MR

**xelawho** · 09-29-2011 09:11 AM

yeah, I thought I would leave the exciting css stuff to you

Thread: [RESOLVED] adding text box below rotating images

Thread Tools

Display

[RESOLVED] adding text box below rotating images

adding text box below rotating images

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions