BZU PAGES: Find Presentations, Reports, Student's Assignments and Daily Discussion; Bahauddin Zakariya University Multan Right Header

HOME BZU Mail Box Online Games Radio and TV Cricket All Albums
Go Back   BZU PAGES: Find Presentations, Reports, Student's Assignments and Daily Discussion; Bahauddin Zakariya University Multan > Welcome to all the Students > Tutorial

Tutorial Teach,Learn,Share,Discuss and Do everything other than Class Lectures


Reply
 
Thread Tools Search this Thread Rate Thread Display Modes
  #1  
Old 16-07-2008, 01:21 PM
.BZU.'s Avatar


 
Join Date: Sep 2007
Location: near Govt College of Science Multan Pakistan
Posts: 9,693
Contact Number: Removed
Program / Discipline: BSIT
Class Roll Number: 07-15
.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute.BZU. has a reputation beyond repute
Default Basic JavaScript Slideshow Tutorial

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:

HTML Code:
 
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 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.

HTML Code:
[IMG]http://cs.bzupages.com/firstcar.gif[/IMG]
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:


HTML Code:
 
The core of this script is the part in red:

HTML Code:
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:

HTML Code:
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]
__________________
(¯`v´¯)
`*.¸.*`

¸.*´¸.*´¨) ¸.*´¨)
(¸.*´ (¸.
Bzu Forum

Don't cry because it's over, smile because it happened
Reply With Quote
Reply

Tags
basic, javascript, slideshow, tutorial


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Similar Threads
Thread Thread Starter Forum Replies Last Post
JavaScript upgrade to feature modularization .BZU. Tech world 0 30-09-2011 11:28 PM
Animated progress/loading bar upon form submit - Javascript .BZU. How to ? 0 08-09-2011 02:25 AM
Slides of introduction t0 Javascript hurain07 Web Engineering 0 18-06-2011 01:23 AM
Networking Tutorial (Basic Networking) II usman_latif_ch Networking/Ethical Hacking 0 23-09-2009 02:13 PM
Introduction to JavaScript PPT slides (BSIT06-10) .BZU. E Commerce 1 05-12-2008 09:32 PM

Best view in Firefox
Almuslimeen.info | BZU Multan | Dedicated server hosting
Note: All trademarks and copyrights held by respective owners. We will take action against any copyright violation if it is proved to us.

All times are GMT +5. The time now is 03:34 AM.
Powered by vBulletin® Version 3.8.2
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.