Interactive Elements for Your Web Site
how to use javascript and shockwave

go to: main approach _____________ shockwave + behind scenes + sites + examples +++ slide show +++ quizzer +++ calculator _____________ javascript + behind scenes + sites + examples +++ slide show +++ quizzer +++ navigator menu

the shockwave slide show "clicker"
We created this shockwave application for a faculty member who wanted to show her Spanish students images from her travels to South America, and present captions in both English and Spanish. It was a bonus for her when we said we could also attach audio captions as well!

The idea was to create the functionality in a Shockwave file that could be customized simply by editing the HTML code of the page used to display it. It is set up so the "slide images" as any kind of HTML file (so it could include text, images, or even remote web sites). We provided instructions and template files that can be modified.

slide show examples
As part of our "clicker" package we provide a few examples:

NOTE: These links will open in a second web browser window so you do not lose track of this web page.

• Imágenes de Ecuador (Images of Ecuador) was the first slide show created by Gail Shay, GateWay Community College.
• North Rim of the Grand Canyon is the example we use in our step-by-step tutorial.

what you will need
The "clicker" download includes images and sound files that you can experiment with, but you may wish to accumulate some media of your own to incorporate into a slide show. If you want to locate some image files, we suggest the following sources:

• Lycos (Be sure to select "pictures" or "sounds" from the menu in the search screen)
• Yahoo's ImageSurf is an image browser.
• The Free Site provides a directory of web sites sources for free graphics.
• Ditto.com allows you to search the web for images by keywords
• WebSEEK is a new effort to catalog the visual information on the World Wide Web.
• SunSite ImageFinder
• Amazing Picture Machine is a searchable index of images on the web.
• My own Arizona Photos are yours to practice with as well.

If you come across a graphic in any web page, you can "borrow" it by accessing the hidden pop-up menu in your web browser. Either use a right mouse button click (Windows) or click and hold (Macintosh) on any image, and select Save This Image as... from the menu that appears.

NOTE: This is okay if you only are practicing with images. Play fair on the web. Never use another person's web graphics in your own public pages without first asking permission.

Do not spend too much time "surfing" for images. Once you learn how to use the "clicker" you can always go back and refine your slide shows.

how to
Now, we will link you to the site that explains, step-by-step, how to use the Shockwave "clicker":

  http://www.mcli.dist.maricopa.edu/alan/nojava/clicker/

Follow the steps that start with the links under the heading "how to guide". From there you will find the link to download the template files. Be sure to read the steps carefully!

what's next
Now you may select any of the other Shockwave examples from the navigation menu at the top of this page. Or as an alternative, you can compare the slide show created with Shockwave to another one you can create using JavaScript, shown in JavaScript Example 1.