Metachecker.net
|
TrafficChecker.net
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
Image Slideshow with description
This nifty image slideshow script lets the user manually move back and forth between images, by clicking on the provided buttons. An accompanying textual message of your choice is displayed below each image. Cool!
Insert into <HEAD>
<script language="JavaScript"> <!-- // sIMPLE sLIDE sHOW with Description sCRIPT by // Chetan M Soni(csoni@email.com), 8/1999. // // NOTICE: To my knowledge this script works with // Netscape 3.0+ and Internet Explorer 4.0+. By // using this script you agree that I am not // responsible for any type of damage it causes. // To use this script freely, you must leave this // comment intact. // // If you need help using the script, email me at // csoni@email.com, and I'll be happy to help. // Browser checker Browser_Name = navigator.appName; Browser_Ver = parseInt(navigator.appVersion); if((Browser_Name == "Netscape" && Browser_Ver >= 3) || (Browser_Name == "Microsoft Internet Explorer" && Browser_Ver >= 4)) Browser_Gen = ">=3rd"; else Browser_Gen = "<3rd"; if (Browser_Gen == '>=3rd') { num_of_slides = 5; // Declare the number of slides in your show slide_num = 1; // Which slide loads ups first // Description of each slide desc1 = "First Slide - the number one, with a RED Background"; desc2 = "Second Slide - the number two, with a ORANGE Background"; desc3 = "Third Slide - the number three, with a GREEN Background"; desc4 = "Fourth Slide - the number four, with a BLUE Background"; desc5 = "Fifth Slide - the number five, with a PURPLE Background"; } // These functions alter the slide_num accordingly function firstslide(){ slide_num = 1; changeslide(); } function prevslide(){ slide_num = slide_num - 1; if(slide_num < 1){ slide_num = num_of_slides; } changeslide(); } function nextslide(){ slide_num = slide_num + 1; if(slide_num > num_of_slides){ slide_num = 1 } changeslide(); } function lastslide(){ slide_num = 5; changeslide(); } // This function changes the slide and the description box according to the slide_num function changeslide(){ // Changes the slide eval('document.picbox.src = "pic' + slide_num + '.jpg"'); // Changes the description box eval('document.descform.descbox.value = "Slide ' + slide_num + ': ' + eval('desc' + slide_num) + '"'); } // end hiding contents --> </script>
Insert into <BODY>
<body onload="changeslide()"> <center><table BORDER=0 CELLSPACING=0 CELLPADDING=2 COLS=1 WIDTH="304" BGCOLOR="#666666" > <tr> <td> <center><table BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=1 WIDTH="300" > <tr> <td ALIGN=CENTER VALIGN=BOTTOM BGCOLOR="#F4F4F4"><img SRC="Spacer.gif" height=30 width=30> <br><img SRC="pic1.jpg" NAME="picbox" > <br><img SRC="Spacer.gif" height=30 width=30></td> </tr> <tr> <td ALIGN=CENTER VALIGN=CENTER BGCOLOR="#F4F4F4"> <form name="descform"> <textarea name="descbox" rows=3 cols=30 wrap=virtual onFocus="this.blur()"> </textarea> </form> </td> </tr> <tr> <td><img SRC="Spacer.gif" height=2 width=2></td> </tr> <tr> <td ALIGN=CENTER VALIGN=TOP BGCOLOR="#B9B9B9"> <center><table BORDER=0 CELLSPACING=0 CELLPADDING=10 COLS=4 WIDTH="250" > <tr> <td ALIGN=CENTER VALIGN=CENTER><a href="javascript:firstslide()"><img SRC="first.gif" BORDER=0 height=28 width=40></a></td> <td ALIGN=CENTER VALIGN=CENTER><a href="javascript:prevslide()"><img SRC="prev.gif" BORDER=0 height=28 width=40></a></td> <td ALIGN=CENTER VALIGN=CENTER><a href="javascript:nextslide()"><img SRC="next.gif" BORDER=0 height=28 width=40></a></td> <td ALIGN=CENTER VALIGN=CENTER><a href="javascript:lastslide()"><img SRC="last.gif" BORDER=0 height=28 width=40></a></td> </tr> </table></center> </td> </tr> </table></center> </td> </tr> </table></center>
Other Options
Directions 1) Copy and paste the script within the 'head' tag of your html file. 2) Name all your pictures using the following schema: pic1, pic2, pic3, .. ,pic25, ... 3) Then change the 'num_of_slides' value to match the number of pictures you will be using. 4) Change the 'descX' values to describe the corresponding slides. 5) Add this within the 'body' TAG: " onload='changeslide()' " 6) In the body of your html file you must add the following within the 'image' tag of the image you'll be sliding: " NAME='picbox' " 7) For the textbox for a description of the slides, you will also have to add this to the body of your html file: " <form name="descform"> <textarea name="descbox" rows=3 cols=30 wrap=virtual onFocus="this.blur()"> </textarea></form> " 8) These are the links you have to use in your 'href' tags to slide the images: First slide : " href='javascript:firstslide()' Previous slide: " href='javascript:prevslide()' Next Slide : " href='javascript:nextslide()' Last Slide : " href='javascript:lastslide()' 9) All the pictures must be in the same dir as the html file.