Action!

It’s now a federal law that every Web site must have JavaScript rollover buttons, and since I didn’t want to get in trouble with the authorities, I figured I’d play ball. But instead of improving myself and actually learning JavaScript, I decided to sit back and let GoLive handle the scripting.

If you want to do a lot of fancy interactive stuff with JavaScript, you still have to learn the language, but you can get a little help from GoLive’s Script Editor (which has syntax checking, a nice feature that comes in handy when you can’t figure out where you went wrong). However, if you’re looking for more common scripts, GoLive is ready and rarin’ to go. Making rollovers, for example, is a snap.

I already have my navigational icons created and placed on the page. Now I want an explanatory title to appear below them as the mouse passes over each one. That way, users will know what section they’ll be going to when they click on various icons (since my icons are completely vague and unhelpful on their own – what great design!). So if you put the mouse over the sun icon, the word Biography will appear below.

As with most aspects of GoLive, you need to have some understanding of what’s going on behind the scenes before you start pressing buttons and hoping for the best. So even though I don’t have to know how to write out a script, I do need to know how these rollovers work: When the mouse is placed over a certain image, a new image will replace the existing one in a target location. This means I need to create a blank image, which will swap out when the script calls in the title graphic.

Creating all these images and making sure that they’re sized correctly is the hard part, and it’s up to me to do all that in Photoshop. Building the rollovers is just a matter of telling GoLive where everything is and specifying which actions should happen.

The program provides a number of these prefabricated Actions that can be applied to images or text or whatnot. Actions are controlled by various scripts and are triggered by users doing something (moving the mouse, clicking the mouse, hitting a key, etc.). You can pull text from a form, preload images, display a random image, create pop-up windows and alert boxes, drop text into the status bar, write and read cookies, and perform other common, script-driven features. Or you can wander into dHTML territory by creating floating boxes and moving them around with wipe transitions, scrolling through windows and changing background colors dynamically, and having sounds start and stop at the users’ whims. Although these actions are premade for you, they’re still pretty flexible and can be combined in any number of ways – all without getting your hands dirty with code.

But all I want is ye olde rollover, so let’s take a look at how that works.