|
|
Free Open Book
Sams Teach Yourself JavaScript in 24 Hours |
|
Creating RolloversOne of the classic uses of JavaScript is to create rolloversimages that change when you move the mouse over them. They are typically used to create navigation links that give the user a bit of guidance by highlighting the one the mouse is over. In this section, you'll learn how to use JavaScript's dynamic images to create rolloversand then you'll learn why you shouldn't do this most of the time, and how to create rollovers with no scripting at all. JavaScript RolloversFirst, let's take a quick look at how to create rollovers using JavaScript. To do this, you start with regular and highlighted versions of each rollover image. Figure 19.1 shows two examples of navigation buttons in both states. Figure 19.1. Regular and highlighted versions of two button images.
As you might guess, all this requires in JavaScript is to combine an onMouseOver event handler with a dynamic image. Adding onMouseOut allows your script to restore the original image when the mouse moves away. Listing 19.1 shows a simple way to do this with inline event handlers. Listing 19.1. Using Basic JavaScript Rollovers
This is just a basic bit of inline JavaScript, so you can test it by simply loading the HTML file into a browser. The results are shown in Figure 19.2. In the figure, the mouse cursor is over the Archives button. Figure 19.2. The rollover example in action.
CSS Rollovers Without JavaScriptAlthough JavaScript rollovers work fine in today's browsers, the technique was developed in the days before CSS, and there is now a better way to accomplish the same thing. Using the :hover directive in CSS, you can create text links that change color when the mouse hovers over them. Listing 19.2 shows a simple example of CSS rollovers. Listing 19.2. JavaScript-Free Rollovers with CSS
To try this example, simply load the HTML document into a browser. When you move the mouse over the links, their background color changes from white to gray. This example is shown in Figure 19.3. Figure 19.3. Simple CSS-only rollovers.
This isn't as fancy as the JavaScript rollovers, but it has some advantagesfirst of all, it doesn't require JavaScript. Second, the links are actual textthis means they'll work even in text-based browsers, primitive mobile phone browsers, and voice-reading browsers for the blind, although the rollover effects won't work in these situations. Third, the page loads faster, and you can add more links without creating graphics. Graphic CSS RolloversSuppose you're really attached to the nifty graphic look of the first rollover example. Before you do something like that, take a look at Listing 19.3. This listing uses CSS to implement graphic rollovers, which look and work exactly like Figure 19.2, with no JavaScript. Listing 19.3. Graphic Rollovers with CSS
Here's a summary of how the CSS works:
Notice that the HTML portion of this example is identical to the previous example, and it will work exactly the same on text-based browsers and browsers with JavaScript turned off. Users with modern browsers will see the graphic versions of the links instead. This gives you the look of graphic rollovers without JavaScript, and without compromising accessibility. By the Way Another reason to use this type of rollover: Because the links are still in the HTML as text, search engines see them as ordinary links, and can do a better job of indexing your site. See Hour 15, "Unobtrusive Scripting," for more information on accessibility and search engine optimization.
|
Main Menu |
| 500 Juegos Gratis | 500 Giochi Gratis | 500 Jeux Gratuits | 500 Jogos Gratis | 500 Kostenlose Spiele |
