One of the most fascinating about a website are the organization and the attractiveness of the site to the visitors.
So, amidst all, slideshows are the most means of attracting visitors and showing off what you are upto on your website.
In this series, we will take a tutorial on making simple slideshows with HTML and JavaScript;
So, amidst all, slideshows are the most means of attracting visitors and showing off what you are upto on your website.
In this series, we will take a tutorial on making simple slideshows with HTML and JavaScript;
Step 1: Get some images!
The first step, needless to say, is to first fetch the
images you want to include in the slideshow. For this tutorial, we'll be
using these three images:
 |
 |
 |
| "firstcar.gif" | "secondcar.gif" | "thirdcar.gif" |
Imagine yourself as a car salesmen, and these three cars are
the ones you are selling!
Step 2: Preload the images using JavaScript.
The term "preload" in JavaScript refers to the loading of
images into cache prior to displaying them. Preloading images is "necessary"
in a slide show, since the switching between images have to be
instantaneous, without any delay:
<head> <script type="text/javascript"> var slideimages = new Array() // create new array to preload images slideimages[0] = new Image() // create new instance of image object slideimages[0].src = "firstcar.gif" // set image object src property to an image's src, preloading that image in the process slideimages[1] = new Image() slideimages[1].src = "secondcar.gif" slideimages[2] = new Image() slideimages[2].src = "thirdcar.gif" </script> </head>
We've created three instances of the image object and stored
them inside a JavaScript Array, each
referring to one of the images that make up the slide show. By doing so, the
images are loaded into cache, standing by for us to display at anytime.
Notice that the entire code is inserted in the <head> section of the page
(Detailed discussion of preloading images can be found
here).
To be continued on the next post...
The post was taught on http://www.javascriptkit.com/howto/show2.shtml
We say a big thank for allowing me to post your content to my blog for people to see
No comments:
Post a Comment