[thelist] Slide show with html text

Jono Young Jono at brookgroup.com
Fri Oct 10 10:10:26 CDT 2003


I need to make a slide show - containing 3 images with html text captions -
with an image at the top, and a caption below each image.  I would like to
pause the slide show for 9 seconds on each image and caption.  I know that
Javascript is the way to go, I am just not sure how to pull it off.  I have
successfully created a similar slide show using a graphic for the caption
using the code below:

> <script language="JavaScript" type="text/JavaScript">
> 
> var isNS = navigator.appName.indexOf("Netscape")  != -1
> var isIE = navigator.appName.indexOf("Microsoft") != -1
> function show() {
>   if (isNS) document.layers["d1"].visibility = "show";
>   if (isIE) document.all.d1.style.visibility = "visible";
> }
> function hide() {
>   if (isNS) document.layers["d1"].visibility = "hide";
>   if (isIE) document.all.d1.style.visibility = "hidden";
> }
> 
> var image1=new Image(); image1.src="images/slide1.jpg";
> var image2=new Image(); image2.src="images/slide2.jpg";
> var image3=new Image(); image3.src="images/slide3.jpg";
> var image4=new Image(); image4.src="images/slide4.jpg";
> var text1=new Image(); text1.src="images/slide1aol_quote.gif";
> var text2=new Image(); text2.src="images/slide2aol_quote.gif";
> var text3=new Image(); text3.src="images/slide3aol_quote.gif";
> var text4=new Image(); text4.src="images/slide4aol_quote.gif";
> var step=1;
> var slide=1;
> var text=1;
> 
>                 
> function slideit() {
>     if (!document.images) {
>         return;
>     }
>     
>     document.images.slide.src=eval("image"+step+".src");
>     document.images.text.src=eval("text"+step+".src");
>     
>     if (step<4) {
>         step++;
>     } else {
>         step=1;
>     }
>     setTimeout("slideit()",5000)
> }
> 
> 
> </script>
> 
> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
> onload="slideit();" background="images/bg_1.gif">
> 
Then, in the page¹s html code, I put name="slide" on the JPG slideshow
image, and name="text" on the slideshow¹s GIF text image, and the images
rotated.  Can I do something similar to this, but use html text instead of a
GIF for the slideshow¹s caption?  Hopefully I am being clear enough here, I
an pretty new to this.  Thanks in advance!

-- 
Jono Young
Designer/Illustrator



More information about the thelist mailing list