|
||
 |
||
|
| How To . . . Create Rollover Animations |
 Email This
 Print ThisView My Personal Library |
|
Step By Step April 2001 • Vol.7 Issue 4 Page(s) 88-89 in print issue |
How To . . . Create Rollover Animations | ||
 Do you remember drawing stick figures in a notebook and then flipping through the pages as fast as you could when you were a kid? By drawing each stick figure in a slightly different position, flipping through the pages simulated a crude form of animation. JavaScript animation can simulate this crude animation on your World Wide Web site in a similar fashion. Rather than flipping through Web pages, JavaScript animation flips through static GIF (Graphics Interchange Format) or JPEG (Joint Photographic Experts Group) image files. If your purpose, however, is to show movement on your Web page, there are better approaches, such as animated GIF files, Java applets, or even streaming video. Even though it is not the best approach for showing general animation, JavaScript animation is effective in certain situations in order to create navigational guidance, such as when Web site visitors click buttons or open frames. When you use JavaScript animation to display a different image when a mouse pointer "rolls" over an image, we refer to this type of animation as rollover animation. Rollover animation is an excellent way to display Office-like "tooltip" hints for the commands and links that you use on your Web site. Rollover animation uses a combination of JavaScript and HTML (Hypertext Markup Language) coding. JavaScript is a browser programming language that works in Microsoft Internet Explorer and Netscape Navigator (and Netscape's other browsers). JavaScript is unrelated to Java, despite the similarity of their names. For specific details about JavaScript, see Splendid Special Effects in this issue. For more information about Java, see Brew Your Own Java, also in this issue. Although JavaScript has a number of uses, some of them, such as opening new browser windows from within a Web site, are invasive and that's why some users turn off JavaScript. Of course, if some users have turned off JavaScript in their browser preferences, then your carefully constructed rollover animation will not work in their browsers. For this reason, many Web developers use rollover animations mainly for enhancements that are nice to have, but the developers retain other site elements and navigational tools so the site is still usable without rollovers. The purpose of this article is to teach you how to create simplified rollover animations and show you the necessary JavaScript and HTML code to do so.  Get Animated. The first step is to create the image files (either GIF or JPEG) that will form the basis for the animation. For example, you might have one image that shows what the button looks like before the mouse rolls over it and have another image that shows what the button looks like after the mouse rolls over it. Combining these two images will create a simple example of a rollover animation. Or, perhaps you're interested in displaying tooltips on your site. If that's the case, you'll want one image of an icon without the tooltip text (to show its appearance before the mouse rolls over it) and a second image of that same icon with its tooltip text. To show something more complex and create actual animation, such as a clock turning, you would, of course, need a number of images to simulate this type of motion. There are two major considerations to keep in mind in creating these images. First, every image you use is loaded into memory, but not displayed, as the Web page is loading. This means that if you use a lot of images or complex graphics, the loading time for your Web page will be substantially increased. This can turn off your visitors, especially if they use a dial-up connection to connect to the Internet. Second, each image you plan to use in the same spot should be the same size. Otherwise, the other elements of your Web page will move around as the various images replace one another. This means, for example, that your image of the button without the tooltip will need blank space at the top as a placeholder for the tooltip that will display in its replacement image. Once you create the images, you can begin creating the Web page that displays them. Older browsers (Navigator versions prior to 3.0 and Internet Explorer versions prior to 4.0) do not support JavaScript. Some rollover animation designers advocate running JavaScript in these early browser versions to make sure your Web page can "fail gracefully" when a visitor opens your site in one of these older browsers. If you want to perform this type of check, you'll need the complete JavaScript code needed to do this. Visit some sites that feature JavaScript solutions, such as the two suggestions we provide at the end of this article. To see the rollover animations we created with the techniques discussed in this article, visit our Web site at http://www.smartcomputing.com/learning/webtips/animation, and move your mouse over the various icons to see the rollover effect. All of the code in this article relates to that sample page. By viewing the source code for the sample page, you can see how all of this ties together. The page has two examples. In the first one, there is an image of a mailbox that changes to an envelope when the mouse passes over it. When the mouse is no longer over it, it reverts to a mailbox. The other example has three images. Each image displays a tooltip as the mouse passes over it. The first step in creating a Web page for rollover animations is to preload the images. Even though this is not strictly required, the effect would be very slow if the images were not preloaded. The first example uses two images: Mailbox.gif and Envelope.gif. The JavaScript code for loading them is: <script language="javascript"> <!— { img1= new Image(); img1.src="Envelope.gif" img2= new Image(); img2.src="Mailbox.gif" } //—> </script> The first line identifies this as JavaScript code and the last line flags the end of the JavaScript code. Within the example, we are interested in the four lines that begin with "img." Each image gets two lines: the first one creates a new object (img1 and img2) and the second line loads a specific image file into it. As with any image file, you can, if necessary, specify a path to that file. Although this example only loads two images, you could load as many images as necessary by adding the object creation and image loading lines for each image. This script only loads the images into memory, it does not display them. However, any time the Web browser tries to display any of these images, it grabs them from memory rather than reloading them from the Web site (via the Web server). The images will be referenced using their file name, not their object names. After this step, the Web browser needs to display the standard image and queue up the replacement image. We want the image to change as the mouse passes over it. This only works for a link so we will have to code this as a link. If we wanted, we could set this up as a standard link that takes the user to a new location, but in this example, we will designate it as an inactive link that does nothing when clicked. The code to do this is: <a HREF="#" onMouseOver="rollover1 .src='Envelope.gif'; return true" onMouse Out="rollover1.src='Mailbox.gif'; return true"> <img SRC="Mailbox.gif" NAME="roll over1" Border="0"></a> </p> The first line is the beginning of a standard HTML link, except that the linked address has been replaced with a "#". This reopens the present page so clicking does not change pages. (A completely blank link will show a directory listing or cause other problems so something must be listed here.) The second line does three things. The "rollover1.src" portion names this rollover animation. The .SRC extension is required, but the name can be anything. All the latter references within this animation should use the same name and all other animations need their own unique name; otherwise, they will interfere. The "onMouseOver" section instructs the computer to perform this line when the mouse is over the image. And the "Envelope.gif" portion gives the name of the image to use for this event. The third line gives the name of the image to use when the mouse leaves the image. This name is normally the same as the original image, but that is not required. The fourth line closes out the link. Finally, the last line gives the name of the image file to use before the cursor has passed over this spot. This controls the actual display of the image, so any HTML size attributes should be used here. Displaying Tooltips. Rollover animation is particularly effective for showing text messages, tooltips, when users move the mouse pointer over an image. This is helpful for anyone who cannot figure out the function of the button from its image. Only one small change is needed to implement this effect: We need an image of the button without and with the text message. The sample Web page has three icons/buttons side by side; therefore, six images need to be preloaded rather than two (as we described earlier). To keep the images side by side, they are loaded into a three-column table, but otherwise, the code is the same as what we described previously. You can see this code by visiting our sample Web page with the rollover animations, and choosing Source or Page Source from the View menu in your browser window. For more information, we recommend visiting Michael Schrenk's JavaScript Animation Tutorial (http://www.schrenk.com/js/2.htm) and WebReference.com's New JavaScript Mouse Events (http://www.webreference .com/dhtml/column1). As you can see from the sample Web page we created in this article, rollover animation is an easy and effective way to add a little pizzazz to your Web pages.  by Ronny Richardson |
|
Home Copyright & Legal Information Privacy Policy Site Map Contact Us