Web Site Hosting Information - Your guide to website hosting

Java Script Lesson 9 ‘ Adding a Slideshow

In our previous tutorials we have illustrated how JavaScript can be useful for several simple tasks. It is now time to move on to how to make JavaScript perform tasks that can enhance your web site and improve your visitor’s experience. JavaScript is very powerful and can be used in a variety of different ways.

This lesson will cover how to add a JavaScript slideshow to your page. If you need to display several images, but do not want to add them all to the same page, this is a neat way to display them. This is also helpful if you want to have a more professional appearance for your website.

Unfortunately, older browsers, such as Netscape 3 or Internet Explorer 3 will not be able to view this slideshow, as they do not have the capability of processing this script correctly. However, the majority of your users should be able to benefit from the addition of this script to your site.

This first script is a JavaScript slideshow that will run automatically, as soon as a viewer loads your page in your browser. You will be able to specify the locations of all of your images in your script so that you can control the order in which they display.

The first part of your script will appear in the area of your HTML document. This is the where you will designate the sources of the images that will display in your slideshow. For example: img src = “mysecondimage.gif”

The next part of your script will go into the < body > tag of your HTML document. This is where you will specify which image you would like to display in the first position of your slideshow.

The last part of your script will then appear after the tag of your HTML document. This is where you will set how quickly your images will display before the next image appears. In our example, a new image will appear every 35 seconds.

Feel free to copy and paste this script into your HTML page. All you will need to change are the img src tags to reflect your images, and how quickly you would like to have your slideshow progress by setting the setTimeout tag to your desired increments.

If you need to add more than 3 images, you would need to add them at the beginning, in the < head > tag area of your page, making sure that each one has the correct var tag.

Related Posts:

Java Script Lesson 8 ‘ Using More Than One JavaScript on a Page

Java Script Lesson 10 ‘ Conditional Statements

Java Script Lesson 4 - Functions

Java Script Lesson 2 - Learning About Objects

Java Script Lesson 6 - Functions With Two Arguments

Posted on 12/27/05 2:02 AM

Be the first to comment!

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website