Anyone can put vacation photos on their website, but only the coolest web builders will design them as a slideshow. And it's not a simple slide show with one photo and one HTML page, but a truly dynamic slide show, with each image downloaded to the same HTML page. We'll teach you how to use Dynamic HTML (DHTML) and Cascading Style Sheets (CSS) to build your own personal slide show that will make your friends, family and colleagues more boring, oh no! It's more impressive. But remember! Because this slide show is written in DHTML, it can only be viewed in browser versions 4.0 or above.
Of course, this kind of slideshow has serious uses. It's just that we haven't thought of it yet.
step one
Collect the images you already have on the web and crop them to the same size. Make sure the size range is no larger than 640 x 480 pixels, and keep the pixel dimensions the same across all photos - it will be visually jarring for the viewer if the photos are of varying sizes.
Step 2
In your header tag, the first thing you need to do is indicate that you are using CSS in the <STYLE> tag. In the <STYLE> tag, set the position on the page where you want the slide to appear, and decide whether to start with a blank background image, or to show the first slide directly. Please cut and paste the following program code into your page, using location coordinates of your choice:
<STYLE type="text/css"> <!-- .slides {position:absolute; left: 25%; top:25%; visibility:hidden} --> </STYLE>
Step 3
Next, deal with the details of CSS immediately, or insert JavaScript in the header tag. After var numSLides =, set the number of slides to show (don't set too many, because each photo will add a considerable number of KB to the page). There are five photos in our example. The following is the program code:
<SCRIPT language="JavaScript1.2"> var numSlides = 5; var currentSlide = numSlides;
Step 4
If you want to add explanation text for the image, you can use the following program code to replace our description text with your own description text:
var captionTxt = new Array(numSlides);
function setUpCaptions() {
captionTxt[1] = "Entrance to Pier 39."
captionTxt[2] = "Sea lions roam near the pier."
captionTxt[3] = "The boat docked at the pier."
captionTxt[4] = "Underwater world whale mural."
captionTxt[5] = "Islets or rocks in the sea."
}
Step 5
Paste the program code shown here into the HTML file of your web page, under the JavaScript description. Because Navigator 4.0 and IE 4.0 interpret CSS differently, our script uses object detection to determine the rendering mode. If the presented mode is Navigator, it can still define some specific objects so that the IE program code still works. In addition, this is also the end of the entire program code, so it must end with the </SCRIPT> tag:
function setUp() {
if (!document.all) {
document.all = document;
for (i=1;i<=numSlides;i++) document.all[("image"+i)].
style=document.all[("image"+i)];
}
switchSlide(1);
}
function switchSlide(sDir) {
newSlide = currentSlide + sDir;
if (!newSlide) newSlide=numSlides;
if (newSlide > numSlides) newSlide=1;
document.all[("image"+newSlide)].style.visibility="visible";
document.all[("image"+currentSlide)].
style.visibility="hidden";
// If you don't want description text, remove the next line:
document.all["captions"].document.forCaptions.captionsText.
value=captionTxt[newSlide];
currentSlide = newSlide;
}
//-->
</script>
Pay attention to the comments near the end of the program code: if you don't have a description, remove the line below it.
Step 6
Close the header tag with </HEAD>, and then paste the following program code into the body part of the HTML file of the web page. Note that the program code identifies each image with a separate <DIV> tag, which is associated with the regular <IMG src> format:
<BODY onLoad="setUp()">
<B> Builder.com slide show!</B>
<DIV id="image5" class="slides"><IMG src="fifth.jpg"></DIV>
<DIV id="image4" class="slides"><IMG src="fourth.jpg"></DIV>
<DIV id="image3" class="slides"><IMG src="third.jpg"></DIV>
<DIV id="image2" class="slides"><IMG src="second.jpg"></DIV>
<DIV id="image1" class="slides"><IMG src="first.jpg"></DIV>
Step 7
Your audience has to click through the slides at their own pace, so you have to provide them with something to click on. . You can use plain old hyperlinks, but it's much more sophisticated with special Previous and Next GIF click buttons. The sample program code uses a table to connect next.gif and previous.gif:
<DIV style="position:absolute; top:350px; left:100px">
<A href="javascript:switchSlide(-1)"><IMG src="previous.gif" border=0></A>
<A href="javascript:switchSlide(1)"><IMG src="next.gif" border=0></A>
</DIV>
If you don't want to use GIF files for the Previous and Next click buttons, replace the <IMG> tags above with text.
Step 8
Finally, enter the description text to be displayed in <TEXTAREA>. You can decide the size of <TEXTAREA> as you like, just change the rows= and cols= numbers. The following is the program code:
<DIV id="captions" style="position:absolute; left: 320px; top:75px">
<B>Picture caption</B>
<FORM name=forCaptions>
<TEXTAREA name="captionsText" wrap="virtual" rows=25 cols=20"></TEXTAREA>
</FORM>
</DIV>