Electric Type

Multimedia

About Us

News

Help

Image Swapping Demo

Page 2 — How it was done

The array object was introduced in Navigator 3.0 and tied together with the images object. So any version of Netscape 3.0 with JavaScript turned on will be able to accomplish this. The code that runs this is based on one simple call:

    <script>
    function changeImage(image, source)
    {document.images[image].src = source;}
    </script>
    <a href="javascript:changeImage(2,
    'http://www.taylor.org/stuff/taylor.gif');"> Taylor's face</a>
    <a href="javascript:changeImage(2,
    'http://www.taylor.org/stuff/anna.gif');"> Anna's face</a>

This says that in the current document (your HTML page), the script should look for the third image on the page (JavaScript starts counting at 0. It's a C thing) and change its source to the specified URL.

It's that simple.

The rest of the script structures the presentational aspects of the image cells, tweaking how the images are displayed, how quickly they change, how the transitions work between "types" of objects, and other behind-the-scenes trickery.

The opening credits page is a GIF that was set to 100 percent width and height; JavaScript grabs the pixel dimensions for the browser window, and submits them to a Perl CGI that I wrote because I was lazy (hey - it's one of the three great virtues) and I didn't want to figure out how to do form submissions between JavaScript pages. Also, JavaScript has changed the way it redraws pages between versions 1.0 and 1.1. I probably could have done this in one script, but the Webmonkey producer explained a little thing called deadlines to me, so ... no elegant code.

To view the source of this or any JavaScript application, you'll need to append a "view-source:" before the URL in the location field of Navigator. Selecting Document Source from the View menu will give you only a partial display of the code in Navigator 3.0; it will display the output of any document.write() calls, but not the source.

If you haven't seen them, Thau's tutorials offer a great introduction to JavaScript. The Perl source for my piece (really only five lines of actual Perl) can be viewed here. You're welcome to hack away at the source and adapt it to your needs. I've placed the piece under the GNU public license.

Tutorials  

User Blogs  

Teaching Tools  

Authoring  

Design  

Programming help  

Advanced Flash  

Javascript  

Glossary  

PHP Coding  

User Blogs

Screen Shots

Latest Updates

Contact Us

Valid HTML 4.01!
Valid CSS!

Breadcrumb

© ElectricType
Maintained by My-Hosts.com
Site map | Copyright | Disclaimer
Privacy policy | Acceptable Use Policy
Legal information.