User:Jngare/my sand box
Caption1
Caption2
Caption1
Caption2
[[
"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"> </script> </head> We've created three instances of the image object, 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). Step 3: Add in the html codes necessary to display the first image of the slide show. <body> <img src="firstcar.gif" name="slide" width=100 height=56> </body> All we've done above is insert the first image of the slide show using HTML. Notice how we gave the image a "name" attribute. By naming the image with an arbitrary name, it enables JavaScript to access and manipulate the image, which we will see next. Step 4: With everything in place, all we need now is a script that accesses the above image and changes the src of the image periodically, creating a slide show. The below lists the complete script: <script type="text/javascript"> </script> The core of this script is the part in red: document.images.slide.src=eval("image"+step+".src") The left handside accesses the path of image "slide" using the image object, then the name of the image, then the keyword "src". The path of any image in a html document can be accessed this way. The right handside dynamically assigns a new src (path) to the image, thus changing the image. The three possible paths the image may receive are: image1.src //"firstcar.gif" image2.src //"secondcar.gif" image3.src //"thirdcar.gif" in that order. Step 5: Putting it all together. We've preloaded the images, inserted the first image of the slideshow, and created the function necessary to change the path associated with the image every few seconds. All we have to do now is put it all together into one page, and we've got ourselves a slideshow: <html> <head> <script type="text/javascript"> </script> </head> <body> <img src="firstcar.gif" name="slide" width="100" height="56" /> <script> </script> </body> </html> RELOADING IMAGES What is it? It is basically loading an image into cache before being used, so whenever we want to use it, bam, it appears instantaneously! Usually, when we load a page, all image are not preloaded-that's why we see these image becoming visible bit by bit. Why would we want to preload an image? Because it is the solution to avoiding having delays in between a change of image in effects like rollover images and image slideshows. So how do we preload images in JavaScript? Simply by reating an instance of the image object in the HEAD section of the page, and assigning the image we wish to preload to its src property. Here's an example: <head> <script type="text/javascript"> </script> </head> • Notice that the preloading of the image takes place within in <head></head> section of your webpage. • Recall what you've learned-we are creating an instance of the image object (we did something similar for the date object). By using the keyword "new", we have done that. Next we need to tell it what exactly to contain in it, by using the src property and pointing that to the actual path to the image. Repeat this for every image you wish to preload. Now that we know how to preload images using Javascript, that facilitates the creation of JavaScript applications that demand a smooth transition between image changes. As promised, it's time now to look at how to create the classic rollover image effect! How to create a clickable slide show The slideshow we've just created is almost identical to the one in the beginning of this tutorial, except that its not clickable. We will now see how to extend this example to enable it to not only be "hyperlinked", but hyperlinked with a different url, depending on the image displayed.
A slideshow that's not clickable is essentially the same as a fancy animated gif. A slideshow that is, however, becomes an interactive billboard. In this section, we will enhance the old slideshow to make it into just that! Don't panic- the road to interactivity does not require us to alter the original code in anyway. All that's needed is the addition of a <a> tag surrounding the <img> tag, and a function that manipulates this <a> tag to match different links to each image in the slideshow. Step 1: Surround the existing <img> tag with a <a> tag. Use a JavaScript url in place of a standard url to allow programmatic access to it: <a href="javascript:slidelink()"><img src="firstcar.gif" name="slide" width="100" height="56" /></a> Notice the code javascript:slidelink() The above is called a JavaScript url, and when clicked on, will call and execute a JavaScript function, instead of load a document. By throwing out the standard link and replacing it with a JavaScript url, a url turns dynamic. Now, there really is nothing mysterious about a JavaScript url- it simply executes a JavaScript function in place of loading a html document. In the above case, the function that will be executed is slidelink(), which we will actually implement in our next step Step 2: Declare and implement function slidelink() inside the original slideshow script. The "meat" of this tutorial, slidelink() is the function that will dynamically change the url of the slideshow to match the image that's currently being displayed in the slideshow. The below lists the original slideshow script, with new additions highlighted in red: <script type="text/javascript"> </script> We declared a new variable called "whichimage", which will be used to keep track of the image currently being shown (its index number). In other words, variable "whichimage" keeps track of whether the image currently in display is the first, second, or third image in the slideshow. How does this variable achieve that? By retrieving the number stored inside variable "step" just before it gets incremented during each image rotation. Once we are able to keep track of this information, we can write code that loads a different url, depending on the image displayed. This is realized through function slidelink(). Step 3: Throw everything together. All that's left now is to toss everything into one bowl, and we have an interactive billboard that takes us to a different url depending on the image shown: <html> <head> <script type="text/javascript"> </script> </head> <body> <a href="javascript:slidelink()"> <img src="firstcar.gif" name="slide" border="0" width="100" height="56" /></a> <script type="text/javascript"> </script> </body> </html> In this tutorial, we've created a slideshow that cycles through three images; it could easily be modified to accommodate any number of images.
