Section 15.1. Creating Fancy Buttons | Creating Web Sites: The Missing Manual

15.1. Creating Fancy Buttons

In Chapter 8, you learned how to use links to let visitors travel from one page in your Web site to another. Although ordinary links work perfectly well, they just aren't showy enough for creative Web masters. Instead, modern Web sites usually let surfers move around by clicking graphical buttons, as shown in Figure 15-1.

A graphical button is really just an image (represented by the familiar <img> tag) that's been turned into a link. There are two ways you can perform this transformation. You can put the image inside an anchor tag, as described in Chapter 8. Here's what that looks like:

 <a href="targetPage.html"><img src="myPicture.jpeg"></a>

Figure 15-1. These menu links look like ordinary text, but they're actually graphical buttons. When you hover over one, the text changes color (by substituting a different image). When you click a button, the image changes again, this time to a version with a different background color . Sometimes buttons add even more graphical details, like etched borders or artfully textured backgrounds.

This adds an ugly blue border around your image to indicate it's a link. To get rid of the blue border, you can use the CSS border-style attribute (Section 6.5.1 in Chapter 6) and set it to none .

Alternatively, you can use the <img> tag in conjunction with the onClick event attribute (Section 14.3.2). This is a good approach if you want to run some JavaScript code instead of just redirecting the visitor with a URL. For example, you used this technique in Chapter 14 (Section 14.3.5) to create the BMI calculator, which performs a calculation and displays it in the current page when you click a button.

Here's an example of this technique:

 <img onClick="DoSomething()" src="myPicture.jpeg">

In this case there's no ugly blue border, and you don't need the border-style attribute.

Neither of these techniques is new. However, things get a little more interesting if you decide to make dynamic buttons. Dynamic buttons (also known as rollover buttons ) change subtly but noticeably when a visitor to your site hovers the mouse pointer over them. This change lets the visitor know that she's poised over a real, live button, and all she needs to do is click the button to complete the deal.

When you're ready to create a dynamic button, you're going to use the image rollover technique described on Section 14.3.3. Here's a quick overview of how the maneuver works. Your button reacts to JavaScript events like onMouseOver and onMouseOut to swap the button picture with another picture that's similar, yet slightly different. Then, when the visitor clicks the button, off she goes to whatever link's associated with the button.

Really slick dynamic buttons have three picturesone for the initial state, one for when the mouse pointer hovers over the button, and one for when the button is clicked (just before the new page appears).

GEM IN THE ROUGH
Free Button Makers

Creating a cool rollover button is an age-old problem, with plenty of solutions.

On the Web, you'll find a wide range of online button-making tools. These tools usually start with a page where you specify the button details (like the text, color, background, and so on). Once you're finished, you simply click a button and a program running on the Web server creates the button image (or images) and displays them in a new page. All you need to do is download the images and start using them in your own pages.

Some examples of online button-making tools include www.buttongenerator.com (which is demonstrated in this chapter), http://cooltext.com/ButtonBrowse.aspx, and www.grsites.com/button. Not all of these button makers can create mouse-over images. However, you can usually run the button generator multiple times and choose a slightly different color scheme to create the highlighted button image. For a change of pace, try www.flashbuttons.com, which lets you create animated buttons that are actually miniature Flash animations (as described later on Section 16.4.2 in Chapter 16). Although these types of buttons are impressive, few Web sites use them because they aren't usable on browsers that don't have Flash installed.

The most powerful button-making tools aren't Web-based. Instead, they're separate programs that you can download and install on your computer. These programs often give a richer range of choices, more configurable options, and features that let you create a pile of buttons at once. Unlike online button-makers, if you go this route you'll need to shop around a bit before you find a program that runs on your operating system (for example, Windows or Mac) and has the right price (free or close to it).

Your best place to find free button-making software is one of the shareware sites discussed on Section 4.1.1. Windows fans might be interested in trying out the free http://freebuttons.org. And if you have FrontPage, skip ahead to Section 15.1.3 to find out about its integrated button generator.

Creating a dynamic button presents you with two challenges:

Creating the button pictures . Not only should these buttons look eye-catchingly cool, the different versions you use (the normal version and the mouseover version) need to line up exactly. If the selected version of your button has text that's a slightly different size or in a slightly different place, it makes for a jarring effect when the browser swaps the images.
Loading the images . Every dynamic button on your site can use up to three images. For best performance, the browser needs to download all these images when it first requests the page. That way, when someone moves the mouse pointer over a button there isn't a noticeable delay while the appropriate mouse-over image is downloaded.

In the next two sections, you'll learn how to create button images and make them dynamic with a dash of JavaScript.

15.1.1. Generating Button Pictures

If you're graphically inclined, you can create the pictures for a rollover button by hand, using just about any graphics program (Adobe Photoshop and Macromedia Fireworks are two popular choices). However, getting buttons to look good isn't always easy. It's also hard to mass-produce buttons, because you need to make sure every button has a consistent size, background, color palette, and text placement.

Fortunately, if you need a bunch of buttons in a hurry, or your artistic abilities are feebler than those of Koko the painting Gorilla, there's an easier option. You can use a specialized button creation program. These programs have no purpose in life other than to help you create attractive buttons with the text, colors, and backgrounds you choose.

The Web's teeming with a wide range of button creation tools (see the box "Free Button Makers"). The following example shows how you can use one of these (the site www.buttongenerator.com) to get what you need.

Surf to www.buttongenerator.com .

This is the ButtonGenerator home page. Scroll down the page until you see the section with the title "Select the button you wish to edit."
In the Show list, choose Only Free Buttons. Figure 15-2 shows the list you'll see .

ButtonGenerator has a large catalog of button styles, and it offers a rotating selection of these for free. For a small yearly fee, you can join as a member and get access to more powerful features and the full catalog of buttons.

If you stick with the free option but find something you like in the full catalog, look for the "Will be FREE in" message underneath the button, which indicates when this style will be offered for free (typically less than a week).
Once you find a button you like, click to select it .

Now you'll see a page that lets you customize your button.

In the "Choose a mode" list, select Advanced Form .

The Advanced Form lets you create an ordinary button image and the rollover image at the same time. It also lets you create several buttons at once. (The plain vanilla Easy Form lacks both these valuable features.)

Figure 15-2. At any given time, ButtonGenerator offers about 50 free buttons styles. You can make a selection from the Sort Buttons By list (circled) to see an alphabetical list, or put the most popular or most recently updated buttons first.

Choose a different picture or a different background for the mouse-over version of your button (see Figure 15-3) .

To create a good dynamic button, you need to differentiate your ordinary button image (called the initial state button) from the image that appears when the mouse pointer hovers over the button (called the mouse-over state button). The difference should be noticeable, yet subtle.

In the Background Transparency section, choose Light Background or Dark Background, depending on where you want to place your buttons .

Button images often need to use some transparency because they aren't exact rectangles. The Light Background option creates an image that tends to look better when the page has a light background showing through (like white, gray, or yellow). The Dark Background is a better choice if you're creating Web pages with a black background.

Figure 15-3. The best way to distinguish an ordinary button from a selected button is by choosing a different state image, as in this example. The ordinary button uses the Dog 1 state, while the selected button uses Dog 5, which is lighter and doesn't have the paw print icon. If your button doesn't provide multiple state choices, you'll need to choose a different background color to make the distinction instead.

In the Text Labels section, enter the text you want to appear on the button (see Figure 15-4) .

If you enter multiple lines of text, each line of text creates a separate button. This is a great trick for generating a pile of buttons in one go.

In the Text Font section, choose a font for the button text, the font size, and whether or not you want to use anti-aliasing .

When choosing a font, you're limited to a relatively small number of choices. These are the fonts that the ButtonGenerator site uses to create the buttonsit doesn't matter what fonts your site visitors have installed on their computers, since these buttons are going to be transformed into graphics.

Anti-aliasing is a feature that smoothes the edges of a font by blending them in with the background. Usually, this makes the button look more professional.

Figure 15-4. In this example, three buttons are being created at once (with the text "Dogs," "Cats," and "Lemurs," respectively). The options underneath let you choose the best font.

In the Text Alignment section, choose left, right, or center alignment, depending on whether the text should be flush with the left edge, lined up on the right, or centered in the middle .

You can also use the X and Y text boxes to offset the text slightly in either direction. Use these settings only if you find out that your button text isn't aligned perfectly after you generate it. For example, if you create a button with lowercase text, you might find that the text is positioned too low on the button. You can correct this by using a negative number for the Y value.
Optionally, tweak the colors for various parts of the button in the Text Color and Mouse Over Buttons Text Color sections .

The Text Color section corresponds to the initial button image. The Mouse Over Buttons Text Color section corresponds to the image that's shown when the mouse pointer hovers over the button. If you like the current colors, you don't need to change any of these details.
Optionally, choose an image from the list in the Icon Insertion section .

If you want, you can embed a small image inside your button, like an arrow or flag. However, you're limited to the options that the ButtonGenerator gives you. Usually, you don't need a button iconit's overkill.
If you want all your buttons to be the same size, turn on the All Same Width checkbox in the Buttons Width section .

If you use this option, the ButtonGenerator calculates the width it needs to fit the largest button (the one with the longest text), and makes all the buttons that same width. If you don't choose this option, each button is sized to fit its text exactly.

Tip: If you plan to stack more than one button in a column (for example, to create a navigation bar), make sure you use the All Same Width option. Otherwise, your buttons won't line up.

There's one other option. If you have a specific width in mind, you can enter that value (in pixels) in the Buttons Width text box. Now all the buttons will have the size you specify. The Buttons Width text box overrides the All Same Width setting. It's a good choice if you're fitting buttons into a specific part of your Web page layout and you know exactly how much space you need to fill.
Click the Click Here to Generate Your Button link at the bottom of the page .

The ButtonGenerator creates all your buttons, and shows them all in a new page (see Figure 15-5). Now it's time to download the pictures (or click your browser's Back button and try again).

Tip: Once you create your button images, they can't be edited in the ButtonGenerator. For that reason, it's a good idea to keep track of the settings you used (like colors, font, text size, and button width). That way, you can generate replacement buttons later on if you need to change the wording, or if you need to create additional buttons that match those you already have.
You need to download the pictures one at a time. To save a picture on a Windows PC, right-click the button and choose Save As (the actual wording depends on your browser). If you've got a Mac, Control-click the button to access your Save As options .

The Save Picture dialog box appears.

Note: All unregistered button fanatics are kindly asked to include a link to the ButtonGenerator site somewhere on their Web page. (It's completely kosher to bury this detail on an About Us or Credits page.) The HTML you need for this link is also provided on the ButtonGenerator page, below your button pictures.
In the Save Picture dialog box, browse to your Web site folder, type in a button name , and click Save. Return to step 14 to save the next picture, and continue until you've saved every image .

It's important to use a good naming convention for your button pictures, so you don't get lost in a tangle of picture files. One approach is to give each button a descriptive name, followed by an underscore , and then the button state. For example, the two pictures for the Dogs button could be named DogsButton_ Normal.png and DogsButton_MouseOver.png .

Figure 15-5. If you create three buttons, you'll end up with six pictures in total, two for each button.

15.1.2. Building a Rollover Button

Now that you have the button images you need, you're ready to incorporate them in a Web page. You can use the exact same ChangeImage() function you used in Chapter 14 (Section 14.3.3).

Note: If you're using Dreamweaver, you don't need to write the JavaScript on your own. Instead, skip ahead to Section 15.1.3 (or keep reading if you're curious to learn how rollover buttons really work).

The following example shows a complete Web page that includes the ChangeImage() script and a single <img> tag, which represents one button. This button is placed inside an anchor tag so it can be clicked to move to another page; and the blue border gets removed thanks to a style sheet rule.

Here's the full HTML, including several comments to help guide you along the way:

 <html> <head>          <title>Fancy Buttons</title>  <style>               /* Hide the blue link border on all images. */   img {                 border-style: none;               }          </style>  <script type="text/javascript">               // This is the script for swapping button pictures.   function ChangeImage(imageID, newImageFile) {                 // Find the object that represents the <img> tag.  var image = document.getElementById(imageID) // Change the picture. image.src = newImageFile               }          </script>     </head> <body>          <p>                 <!-- Create the link with the dynamic button inside. -->    <a href="Dogs.html">                     <img id="Dogs" src="DogsButton_Normal.png"  onMouseOver="ChangeImage('Dogs', 'DogsButton_MouseOver.png')"  onMouseOut="ChangeImage('Dogs', 'DogsButton_Normal.png')">    </a>          </p>     </body> </html>

Figure 15-6 shows the result.

Figure 15-6. Top: The rollover button in its initial state.
Middle: The rollover button while the mouse pointer hovers overtop.
Bottom: The rollover button without the style rule that hides the border. Without this ever-important style rule, a blue rectangle appears as a clumsy indication that the button's a link.

15.1.2.1. Using image lists

Although this page gets the job done, it's a little more complicated than it needs to be. The problem is that the declaration for the <img> tag is quite long. Worse, if you make a slight mistake when you type in the image ID or picture URLs, the code won't work. In a page with dozens of buttons, keeping all this straight can become quite a headache , especially if your pictures are stored in a subfolder (in which case the URLs can become very long). And if you add the image preloading technique discussed a bit later (on Section 15.1.2.2), you're in even more danger of derailing your code with a minor mistake in the picture URL.

To help minimize the chance of error, pages that use rollover buttons commonly add another JavaScript technique. They declare all the picture URLs in a single list, and they place this list in a script block at the start of the page. Each picture is associated with a number, like 1 for the first button, 2 for the second, and so on. From that point onward, the rest of your page can refer to each picture by number, which shortens your HTML and simplifies life considerably.

To create the picture list, you use a JavaScript ingredient that you haven't seen yet: the array . An array is an object that represents a list of items. It can hold as many objects as you want.

Here's an example that creates an array:

 var myArray = new Array()

Initially, this array is empty. To actually put information into the array, you use square brackets to indicate the index number . This is where arrays get a little wonky, because they use zero-based numbering . This is a fancy way of saying the first item is given the index number 0, the second item has the index number 1, and so on. Strange as it seems, programmers always start counting at 0.

Here's an example that puts a text string into the first slot in the array:

 myArray[0] = "This is the first item"

In the dynamic button example, you're dealing with three buttons. Each button has an initial image and a mouse-over image. To track these two sets of images, it makes sense to create two arrays, one for normal images (which you can name imgN) and one for selected buttons (imgS). Here's the complete code you need to create the array and store all the picture URLs:

 <script type="text/javascript">          // The image lists.  var imgN = new Array()  imgN[0] = "DogsButton_Normal.png"  imgN[1] = "CatsButton_Normal.png"  imgN[2] = "LemursButton_Normal.png"  var imgS = new Array()  imgS[0] = "DogsButton_MouseOver.png"  imgS[1] = "CatsButton_MouseOver.png"  imgS[2] = "LemursButton_MouseOver.png"

Now you can rewrite the button so that it pulls the names of the images from the array, rather than using the file names directly:

 <a href="Dogs.html">          <img id="Dogs" src="DogsButton_Normal.png"  onMouseOver="ChangeImage('Dogs',  imgS[0]  )"  onMouseOut="ChangeImage('Dogs',  imgN[0])  ">  </a>

There's another change you can make to streamline your code and make the ChangeImage() function easier to use. Right now, the current version of the ChangeImage() function uses two argumentsthe ID of the image tag and the new image file name. Check it out:

 function ChangeImage(imageID, newImageFile) {

You can simplify life by modifying the ChangeImage() function so that it accepts an object that represents the <img> tag, instead of the name of the <img> tag. Here's the modified version:

 // This is the script for swapping button pictures. function ChangeImage(image, newImageFile) {       image.src = newImageFile     } </script>

As you can see, this means there's no longer a need to go hunting for the image object with the document.getElementById() method. However, this change also allows for a handy shortcut. When you call ChangeImage(), you can pass the current tag using a special keyword named this . The this keyword always refers to the object for the current tagin this case, the object that represents the <img> tag. Here's how it works:

 <a href="Dogs.html">      <img src="DogsButton_Normal.png"  onMouseOver="ChangeImage(  this  , imgS[0])"  onMouseOut="ChangeImage(  this  , imgN[0])">     </a>

Take a moment to compare this to the more painful version on Section 15.1.2. Now you no longer need to give the <img> tag a unique ID to keep track of it. You also don't need to type in the picture URLs every time you call ChangeImage(). Instead, imgS[0] refers to the first selected button image, and imgN[0] refers to the first normal button image.

Note: Keen eyes may notice that the image URL still appears in the src attribute. You might wonder if there's a way to set this detail through JavaScript code using the imgN array. Although it's possible, it's not a good idea. That's because the current approach works even when the browser doesn't support JavaScript. (In that situation, the fancy rollover effect doesn't work, but the ordinary button image is still shown.) If you relied entirely on JavaScript, the buttons wouldn't appear at all on feebler browsers.

To complete this example, you need an <img> tag for each button. In the following code, all the buttons are grouped into a <div> tag so the buttons can be placed together along the side of the page.

 <div class="Menu">          <p>                <a href="Dogs.html">                    <img src="DogsButton_Normal.png"    onMouseOver="ChangeImage(this, imgS[0])"    onMouseOut="ChangeImage(this, imgN[0])">               </a>          </p>          <p>                <a href="Cats.html">                    <img src="CatsButton_Normal.png"    onMouseOver="ChangeImage(this, imgS[1])"    onMouseOut="ChangeImage(this, imgN[1])">               </a>          </p>          <p>                <a href="Lemurs.html">                    <img src="LemursButton_Normal.png"    onMouseOver="ChangeImage(this, imgS[2])"    onMouseOut="ChangeImage(this, imgN[2])">               </a>          </p>     </div>

Here's the style rule that formats this <div> tag, lining it up neatly on the left side of the page:

 div.Menu {       float: left;   margin-right: 20px;   margin-top: 20px;   height: 1000px;     }

For a quick refresher on style sheet-based layout, pop back to Section 9.2. Figure 15-7 shows the final result.

Figure 15-7. A finished page, with three rollover buttons.

15.1.2.2. Preloading images

With the current example, it's only a little bit more work to use image preloading . This technique ensures that the mouse-over pictures are downloaded the first time the page is requested (instead of when the surfer moves her mouse pointer over a button). Although you won't notice the difference when you run a Web page from your computer's hard drive, preloading images makes the buttons more responsive when visitors interact with a page over the Internet, particularly if they've got a slow connection.

The technique for preloading images requires a bit of a quirky workaround. Basically, you need to trick the browser into thinking that you're using the rollover pictures right away. This convinces the browser to download the images without delay.

Then, later on, when the mouse pointer moves over a button and the ChangeImage() method runs, the browser gets ready to download the mouse-over picture. However, being a relatively clever program, the browser immediately realizes that it already has the picture stored away in its cache (a temporary location in memory or on disk for storing recently visited pages and other recently downloaded files). As a result, no download is neededthe browser just uses the image it already has.

To use image preloading, you need to add a function that downloads the rollover pictures. The first step is to create a dummy image object in memory. You won't actually use this image to do anything, but the browser doesn't know that.

 function PreloadImages() {   // Create a "dummy" image.   var preloadedImage = new Image()

Next, the code reads through the entire imgS list of rollover pictures, using a programming construct called a for loop . Each time it finds an image, it stuffs it into the image object, which convinces the browser to download it.

 // Load all the pictures into this image, one after another. for (var j = 0; j < imgS.length; j++) {       preloadedImage.src = imgS[j]     }   }

A for loop repeats code a certain number of times using a built-in counter. In this case, the counter is a variable named j that starts at 0, and keeps increasing until it matches imgS.lengthin other words, until it gets to the last item in the imgS array. Assuming the imgS array has three items, that means this statement is executed three times:

 preloadedImage.src = imgS[j]

The first time is when j is 0, and the code loads up the first image in the list. The second time j is 2, and it digs up the second image. You can guess what happens the third time.

Strangely enough, that's all you need to do. Even though you're not using the images, the browser still obligingly fetches them from your Web server and stores them in its cache when you refer to them in this way.

The only remaining step is to make sure you call the PreloadImages() function when the page is loaded. You accomplish this by adding the onLoad event attribute to the <body> tag, as shown here:

 <body onLoad="PreloadImages()">

That's it. Your rollover buttons are now Web-ready!

15.1.3. Creating Rollover Buttons in Dreamweaver and FrontPage

If you're using an HTML editor like Dreamweaver or FrontPage, you don't need to write your own JavaScript code. Both programs provide a built-in way to quickly create rollover buttons.

In Dreamweaver, all you need to do is select Insert Image Objects Rollover Image. You see an Insert Rollover Image dialog box, which you can use to set all the important details (Figure 15-8). Click OK, and Dreamweaver creates the <a> and <img> tags and adds the JavaScript code for swapping images.

Figure 15-8. To create a rollover button in Dreamweaver, just supply a unique button name, the normal state and mouse-over images, any alternate text that should appear if the image can't be shown, and the target URL. You can also click the "Preload rollover images" button to generate JavaScript code that downloads all the rollover buttons when the page loads.

The only way to improve on this feature is with a tool that not only inserts a rollover button, but can also create the button images you need, based on the text and style options you choose. FrontPage provides the goods with a feature it calls interactive buttons .

To create an interactive button in FrontSection 7.2.53, start by selecting Insert Web Component from the FrontPage menu. The Insert Web Component dialog box appears. In the "Component type box, choose Dynamic Effects, and in the "Choose an effect" box, select Interactive Button. Then click Finish. You're presented with an impressively featured button generator (see Figure 15-9).

When you save your Web page, FrontSection 7.2.53 prompts you to choose file names for all the button pictures you've created using the Interactive Buttons dialog box.

The best part about the FrontPage button generator is that it's fairly easy to modify your button settings and regenerate the button pictures later on. Just double-click the interactive button in the editor, modify the settings in the Interactive Buttons dialog box, and click OK to generate the new images.

Tip: The FrontPage button generator is new in FrontSection 7.2.53. However, if you have an earlier version of the program, you can download a similar tool named 3D Button Visual Editor from Microsoft at www.microsoft.com/downloads/details.aspx?familyid=23e6b5ad-c173-4aa4-8348-f400d670e0ac. (If you don't want to type in this horrendous URL, use the link from the "Missing CD" page at www.missingmanuals.com.)