Click me to go back to the main .designer site...

of Mice and JavaScript

JavaScript is an ugly botch up of what should have been a simple set of HTML extensions. However, it's here and buried within its pseudo-object-orientedness are useful tricks for Web designers.

With just a few lines of JavaScript code you can make your Web pages behave like real multimedia, with buttons that react when your cursor rolls over them. best of all you don't even need to be a programmer to do so. How? Well, because I'm going to tell you, step-by-step.

Before we get going we probably ought to run through some of the basics. This isn't a full-on exposé of JavaScript. I'm just going to tell you what you need to get going.

Central to our quest are what the JavaScrip boffins call handlers. Handlers are bits of HTML tags that run off and perform JavaScript commands, either by excuting what happens in quotes after them or by calling (that's like running, only it sounds more technical) a function. Don't worry, there's plenty of explanation later.

I shan't explain the ins-and-outs of JavaScipt either, as you probably don't want to be burdened with a very grim level of learning just to make a neat trick happen. Suffice to say that what we'll be doing is treating the images in windows as elements of an array and then manipulating that array to produce the desired effect.

The white frame on the top left is an explanation of what's going on; the grey window below it is the source code, slightly trimmed to make it more readable of what is going on in the beige window to the left, which is our example window.

To make them easier to spot I've marked all JavaScript in both the explanations and the source code in red, while any HTML used in the explanations is in blue. (There ain't no point in changing HTML to blue in the source 'cos it's all HTML except for the title...).

The big drawback to this trick (and it's a very big drawback) is that because of the differences in the various flavours of JavaScript it only works with Netscape Navigator 3.0 and 4.0 (Communicator). Both those use JavaScript 1.1 while Navigator 2.0 uses JavaScript 1.0 and Microsoft Internet 3.0 uses a derivative of JavaScript 1.0 called JScript. Neither of those allow you to address the images in a document individually the way 1.1 does.

One final word: the tutorial uses frames throughout. However if you haven't got a browser that can handle frames (that'll be you, Cyberdog users) then you definitely don't have one that can handle JavaScript.

 

On to the tutorial