Webmonkey: design: Four Ways to Create a Mouseover

Mouseovers are like a "soft click" or shortcut. They might simply prompt an "on" state of a button (the UI equivalent of "You Are Here"). They can also provide a summary of what you'll get if you follow the link.

Use to be, only those with a working knowledge of JavaScript could create mouseovers. But now there's more than one way to skin a monkey. New Web technologies - like dynamic HTML, Shockwave, and Flash - are all capable of creating mouseovers. So which is the best one for you? Judge for yourself.

Today we'll show you the pluses and minuses of mouseovers in Javascript, dHTML, Shockwave, and Flash. We'll also give you a how-to for each of them, so you can pick and use the one that works best for your purposes.

JavaScript
If you could buy mouseovers at the supermarket, JavaScript would be found in the generic aisle. The JavaScript mouseover is the most basic of the bunch, and it works well for just that reason. If browser compatibility is an issue, users don't need fancy 4.0 browsers or plug-ins to view JavaScript. All you need are two images and four lines of code.

So why even bother to look at the other three kinds of mouseovers? Because sometimes the simple answers will only get you so far. The JavaScript mouseover is really good at what it does: swapping one image for another. But, say, you want to also swap text on your page and trigger some animation and sound, like what you see in this demo. You'll need more than just JavaScript. But for now, let's assume you're sticking to the basics.

First, create an image tag for the off image, and include the attribute name="the_image", or another name of your choice. By including the name attribute, you're telling JavaScript which image to swap.

First, we use CSS to position the elements and set their visibility (for more on CSS see our Stylesheets collection). The on layer is placed on top of the off layer with its visibility set to hidden. We reference these CSS elements using the

tags in the body of the HTML. The class attribute in each

tag ties it to a specific CSS element in the section.

The HTML inside the

tags is very similar to the plain JavaScript rollover. Basically, it's two separate images wrapped in tags. Use onMouseOver and onMouseOut - respectively - to call custom JavaScript functions that will switch the visibility of the top layer.

The chunk of code at the top of the script corrects the aforementioned inconsistencies between Netscape and Internet Explorer. The part that follows the if statement sets the variables for Netscape, and the variables for IE are set after the else statement. But if you keep the dynamic HTML mouseover simple, you won't have to worry about this part too much. For these purposes, we're just concerned with the showIt and hideIt functions, which affect the visibility of objects. In this case, our object is img1, which is referenced by the attribute ID="img1" in the second

tag.

Multiple function statements (e.g., onMouseOver = "showIt(img1), showIt(text1)") can be used to affect the visibility of more than one layer. To do this, create a variable for each object in the top of the script: var text1 = document.text; and var text1 = document.all.text1.style;. Here's another demo of the same mouseover, but this time with an extra layer that hides and reveals secret text. View the source to get the code.

Shockwave
Because Director is perhaps the most commonly used piece of software for developing multimedia on the Net, its Shockwave plug-in is widespread - or maybe it's the other way around. At any rate, this is both an advantage and a disadvantage. It's nice to know that a large number of people can see your fancy stuff. On the other hand, if your work didn't require a plug-in at all, you could immediately expand your audience by several million.

Another disadvantage with Director/Shockwave is the price of the software itself. Unless your wallet is quite a bit fatter than mine, the difference between freeware and a considerable price tag is, well, considerable. So, if the only thing you're after is a rollover and a link to a new page, Shockwave might not be the best choice. Then again, if you're already using the technology somewhere else on the site, it's as good a choice as any.

Another difficulty with Director is that it takes time to learn. Again, if you just want that rollover, I recommend you go back to the JavaScript or dynamic HTML pages. If you want to stick around for a brief introduction to Director, however, be my most honored guest. If any of the Director terms used here confuse you, please visit Shvatz's Director Basics article.

How it Works

Ingredients: Two images - an on (roll over state) image and an off (normal state) image.

Import your artwork into a new Director project, and set the stage size to the dimensions of your buttons. Note: To save on download time, use artwork that's as small, memory-wise, as can be. To minimize size, set the bit depth on your graphics to the lowest value possible. Do this by double-clicking on your graphics to open the paint window. The current bit depth will appear in the lower left corner. Double click on that, and you'll be able to set a new depth. Director doesn't support JPEG, so this is the only way to get smaller graphics.

Put the rollover state button in sprite 1 and the normal state in sprite 2.

In this example, the graphics are larger than the area we want active, since we don't want the border of the buttons to react on rollover. To do this, we need to define the size of the active area. The Tool Palette has two different kinds of rectangles: a filled one and just an outline. Select the outline tool, and draw a box on top of your original graphic that indicates the area you want active. The new box will automatically be placed in sprite 3.

Now all our graphics are ready. Next we make them look, feel, and react the way we want them it to. We want to let users know when they're rolling over an active area, and we want them to be able to click and go to a new page. These simple tasks are fairly easy to accomplish in Director.

Since everything is happening in frame one and we're not initializing a bunch of variables and handlers, we can do all the scripting in frame one's script channel. The code looks like this:

on exitFrame if rollOver(3) then set the visible of sprite 2 = 0 else set the visible of sprite 2 = 1 end if go to the frame end on mouseUp if rollOver(3) then gotoNetPage "http://www.hotwired.com/webmonkey/" end if end

What's going on here?

First of all, we have two event handlers: the on exitFrame and the on mouseUp. The first script gets evaluated all the time, whereas the on mouseUp is only called when a mouseUp event is happening. Let's take it one mouseover at a time:

The on exitFrame script first. The if/then statement checks whether the mouse is rolling over the area dictated by the dimensions of our invisible box. It's saying if the mouse rolls over sprite 3, make sprite 2 invisible. When sprite 2, which houses the normal state graphic, is invisible - and since the two graphics are the same size - we see only sprite 1 and its rollover state graphic. The script then goes on to make the normal state button in sprite 2 visible again when the mouse is no longer over sprite 3. Line 5 (end if) indicates that there will be no more conditions that need considering. And the final line - go to the frame - makes sure that the player stays in this frame.

The second script block, on mouseUp, runs only when a mouseUp event occurs. This kind of event happens whenever the user releases the mouse button after having clicked it. The handler checks if the mouse is over sprite 3 when this happens. If that is the case, the user is sent to the specified URL.

Now save your little program as a shockwave movie, and embed it in an HTML page. For an example of the code, see the Macromedia site.

To see it what it looks like, check out this demo.

And that's it - you're done! As I said in the beginning, this is a small (and extremely limited) introduction to the possibilities of Director. Learn more about the program by playing around with the tutorials that come with the software and by making use of the included help program. You can also learn more from the Webmonkey multimedia collection (specifically the Shockwave articles). Or go right to the source, Macromedia's developer center.

Flash
Flash suffers from some of the same disadvantages as Director: Viewing it requires the Shockwave plug-in, and the software costs money, though not nearly as much as Director. So, if you're just out for the rollover, this may be overkill. But if you're interested in exploring some of the Web's multimedia capabilities, read on.

In this little Flash how-to we'll be - surprise, surprise! - making a button with a rollover and a link to a new page, like this.

How it Works

Ingredients (once again): two images - an on (rollover state) image and an off (normal state).

Note: one of Flash's greatest strengths is that it uses vector-based art (versus bitmap), which is super small, memory-wise, and therefore super fast. So, generate your art accordingly.

Import the normal state button into a new Flash project. Set the project's stage size - found under Modify in Movie - a bit larger than the size of your button.

To turn our graphics into functional buttons, we need to make them symbols. Do this by opening the Library menu, where our normal state button is featured as a member. In the upper right corner of the menu box, you'll find a downward-pointing arrow. Click it, select Create Symbol, and choose Button.

You should now be in the Symbol Editor window. You have four states at your disposal: Up, Over, Down and Hit. Up is what the button will look like when nothing is happening, Over occurs when a mouse is over it, Down represents when the mouse is down, and Hit defines the graphics that, when in this state, won't be visible. The program uses this information to define the area where the button is active. To do your editing, you need to drop frames into your working layer.

Do this by selecting the space under the four states, and insert key frames (not just frames). Now select the first key frame, the Up state, and drag your normal state button graphic - from the Library menu - to the stage. Observe that the blue dot in the layer is now filled in this state, yet is empty in the other states. This tells you that the Up state has now been assigned a graphic. Select frame two, the Over state, and drag in your rollover state graphic. You should now be able to click on both states and see how the button changes to rollover. Since we don't need a different graphic to indicate the Down state, simply copy the button in the Over state, and paste it in the Down frame.

Finally, to tell the program the size of the active area, go to the Hit frame and paste in the "rollover state" button once more. We'll actually delete this graphic later, but for the time being we need it as a guideline. Select the Brush tool from the toolbar, and set the color to black and the size of the brush to whatever works. Since this frame will never be visible, don't worry about an accuracy contest or perfection. Paint a black dot on the area of the button you want active. When you're done, select and delete the button graphic, leaving nothing but the black dot. And now you have graphics for all four states: Up=normal state, Over=rollover state, Down=rollover state, Hit=black dot.

To get back to the original window, push the upward-pointing arrow in the upper right corner of the stage. Delete whatever is visible on the stage now and drag the symbol member you created in the Library menu to the Stage. Now when you roll your mouse over the invisible active area of the button, the rollover state graphic should swap in. If this doesn't happen, use the Enable Buttons in the Control menu.

The visual part of our rollover program is now complete. We still need to determine what will happen when the button is clicked. Turn Enable Buttons off, otherwise we can't work with the graphics. Double click the graphics on the stage to get the Instance Properties menu. Click the Actions fan to go to the scripting editor. The Plus button represents new actions; select the Get URL action, and type the appropriate URL into the text field. If you're working with frames, indicate in which window you want the linked page to appear by typing the window name in the Window text field. Now hit OK.

All that's left to do is to export everything as a Shockwave Flash movie. This should automatically create a file with a .swf extension - if the extension isn't there, type it in manually. In order for the rest of the world to enjoy your capabilities, embed your movie in a HTML document. A copy/paste-able code example is available at Macromedia's site.

To become even more familiar with Flash, run through the tutorials that come with the software package, use the help option, and go to Macromedia's Flash site.

And now you have four good reasons - JavaScript, dHTML, Shockwave, or Flash - to get out there and rock and rollover. Have fun!

Dave Dayneko and Theis Barenkopf Dinesen are beloved Webmonkey interns. Dave is a student at SFSU, has mismatched thumbs, and thinks cowboy techno is the music of the future. Theis came to us from Space Invaders, Scandinavia's leading multimedia design program in Copenhagen, Denmark.