Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Making JavaScript Rollover and Play Nice

Making JavaScript Rollover and Play Nice


First off, I bring up my left.html page, where the navigational icons are located. By double-clicking that filename in the Site Window, left.html appears in the Document Window, in the Layout format. The images I’m going to use need to be named, and I don’t mean that they need filenames: They need a title that the script can work with. So first I place my blank image (which is actually two brackets with a big, blank space between them) below my icons using the Palette. Then I go to the Image Inspector and hit the Spec tab, where I can modify certain characteristics of the image, such as the border size and the ALT text. This is where I can name the images. In the Name space I title this one blank. Now I have something I can use as my target in the script.

I click on the sun icon image, thereby turning the context-sensitive Inspector into the Image Inspector, complete with an Actions tab on the far right. I select this tab to specify which Actions I want to take place.

Next I need to choose a user event to trigger the Action. In the Events window are six options: Mouse Click, Mouse Enter, Mouse Exit, Double Click, Mouse Down, Mouse Up, Key Down, Key Press, and Key Up. What I want is for stuff to happen when users put their mice over the icon, so I choose Mouse Enter. (JavaScripters may be more familiar with MouseOver.) Then I press the + button over the Actions window, which adds this Event to my Action. Now I have to specify which Action I want by choosing one from the Action Menu. This menu holds all of the various scripted actions that I was describing earlier. For rollovers, choose Image: Set Image URL. This Action deals with swapping images and is used for all varieties of rollovers.

So I’ve set the Action, and the bottom half of the window comes to life. Note that you are told which browsers support this Action (in my case, Netscape 3 and higher and Explorer 4 and higher) – a handy piece of information when deciding if these showoff scripts are worth the trouble.

Now I need to target this Action, in other words, tell GoLive which image I want to change when the rollover takes place. The pulldown Image menu lists all of the images that have been named, so I select the only one that appears there: blank. As it says at the bottom of the window: “Images without names cannot be a target for this action.”

Finally, I need to fill in the Link blank. This tells GoLive which image you want to swap with blank. Using point-and-shoot, I select nav_bio.gif – this is my image of the word Biography – from the Site Window.

Actions

And that’s it. GoLive has all the information it needs to construct the rollover script. I preview the page in my browser (alas, the Preview mode of GoLive can’t show you the effects of JavaScript) and everything looks golden … except that Biography doesn’t disappear when I move the mouse away from the sun icon. After several minutes of cursing GoLive and the Web in general, I finally realize that it’s my fault: I need to implement another script to replace the Biography image with the original blank GIF.

So I return to the Image Inspector and add another Action, this time selecting Mouse Exit from the Events menu. Then I follow the same procedure as I did for the Mouse Enter Action, except that I choose the blank GIF instead of nav_bio.gif. Now I’ve modified the script so that when the mouse is taken off of the icon, nav_bio.gif is replaced by blank.gif. Another quick jaunt to my browser shows the results, and my script is working like a charm. I sneak a peek at the raw code in the Source window, am frightened by the lengthy JavaScript stuff I see, and flee immediately.

For every image I want to attach an Action to, I must repeat this process. All this may sound long and convoluted, but it takes longer to explain than it does to learn. You’ll master the steps after doing it once, and from then on you’ll be able to create a whole slew of JavaScripts in a manner of minutes.

Comments