www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] adding text box below rotating images

  1. #1
    Join Date
    Sep 2011
    Posts
    2

    resolved [RESOLVED] adding text box below rotating images

    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="image_jss.gif" name="banner"> -->
    <img src="photo_JBG_0315.JPG" name="banner" width="400" height="267">
    <div class="slideTitle"> CAPTION TEXT
    </div>
    </div><p>




    <!-- Paste this code into an external JavaScript file named: banner.js.js -->

    /* 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;

  2. #2
    Join Date
    Nov 2010
    Posts
    1,084
    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>

  3. #3
    Join Date
    Sep 2011
    Posts
    2

    adding text box below rotating images

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

    MR

  4. #4
    Join Date
    Nov 2010
    Posts
    1,084
    yeah, I thought I would leave the exciting css stuff to you

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles