Buttons, Slices, Layers, and Frames

On the Surface

When you see a button on the Web, you know it. Buttons are areas of a page that have a graphic representation and do something when clicked - typically, they link to another Web location.

Buttons are used quite frequently on the Web. They are more complicated than simple links because they involve graphics. For this reason, they are not used as often on large pages - too many buttons tend to slow downloading. But buttons can make a page more attractive and appear more interactive.

Buttons can be created by handcoding with HTML and making images in any graphics editor. However, they are complicated enough that they are usually made with the help of a program like Adobe Photoshop or Macromedia Fireworks. In this module, we demonstrate making a button with Fireworks, and explain how the Fireworks format relates to the Web page it creates.

Buttons and Rollovers

A button can be a simple graphic shape that doesn't change when the mouse pointer moves over it. (Example at right.)

A rollover button changes appearance in some way when the mouse moves over it, and when the mouse button is clicked on it. (Example at left.)

Rollover buttons are a complex combination of animated graphic elements, text, and actions. Because of their complexity and their usefulness in Web design, Fireworks has a special Button Editor that helps make the creating of buttons easier. But since buttons are still complex objects, it helps to start with an understanding of how buttons work.

Four Button States

There are four states or appearances a rollover button can have. These are labelled with distinctive names in Fireworks:

Up: The normal state, when the mouse pointer is somewhere else.
Over: The mouse pointer is over the button, but not clicked. This state tells the user visually that the button is "alive" and ready to be clicked. In this example, it has a lighter value than the Up state, making it look as if it's lighting up when the mouse goes over it.
Down: The mouse has been clicked on the button. The button's appearance lets the user know they have successfully "hit" the button. In this example, the beveling has been changed to make it look "inset" and the color is darker, but the text is changed to a brighter hue.
Over while Down: After the button has been pressed and the browser is trying to link to a different site, the user might press the button again. Thbutton's appearance should visually let the user know that the browser is busy trying to do what they asked. Here, the button turns grey so it will appear more "dead".

Graphic Objects and Text

Each rollover button consists of a graphic image (often a rectangle, but any shape can be used) and text explaining what it does.

In Fireworks, the graphic image is a vector object which has attributes of size, position, stroke, fill, and effects.

The text is a normal text object which can be edited, and like any other text, can have its own fill and effects.

Active Area

In addition to displaying a button's graphic image on the Web page, the browser needs to be told what parts of the Web page the mouse pointer can be in to activate the button. This is called the active area.

In Fireworks, the active area is shown as a green film over the underlying graphic. The active area doesn't necessarily correspond to the exact shape of the button, and you can adjust it with its "handled" like other Fireworks objects.

Here are some characteristics of an active area:

• When the mouse enters the active area, the browser should display the "over" image.
• When the mouse is clicked in the active area, the browser should display the "down" image and link to another Web location, or perform whatever action it's supposed to.
• If the mouse has already been clicked once, and is clicked again in the active area, the browser should display the "over while down" image.

Slices

Since each rollover button has several images associated with it, Web pages that display rollovers need to be separated from parts of the page that don't change, and from other rollovers. This is done by slicing the page or image. Each slice actually becomes a separate graphic file when the image is exported (saved for the Web). Fireworks shows the boundaries of the separate file with red lines.

To turn of the red lines showing slices, and the green film showing active areas, click the button at the bottom of the Tool Palette. Click it again to see slices and active areas again.

Graphic Elements

The graphic elements of a rollover button are images (rather than text) on a Web page.

• The image for each button is contained in a table cell of its own.
• This means Web pages that have buttons must be divided up into tables.
• Each cell of the table contains a different "slice" of the page.

Swapping Images

JavaScript

HTML by itself cannot detect the location of the mouse pointer, and cannot swap images. Within the Web page, there needs to be some other way to get the browser to act appropriately. JavaScript is a programming language that can do what is needed, and since all browsers for the past several years have understood JavaScript (also known as ECMAscript), JavaScript is most often used.

Here's what JavaScript does in rollover buttons:

• Detect the position of the mouse at all times while the Web page is up.
• Detect the position of the mouse when any of its buttons are clicked.
• Swap images in the button's cell.
• Link to the desired page or perform other actions as needed.

In case you wondered...

<head>
  <title>D33c: Buttons, Slices, Layers, and Frames</title>
  <script language="JavaScript">
  <!--
    function MM_preloadImages() { //v3.0
      var d=document; 
      if(d.images)
      { 
        if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; 
        for(i=0; i<a.length;i++)
          if (a[i].indexOf("#")!=0)
          { d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}
      }
    }

 //-->
</script>
</head>

<td>
<a href="d33cx.htm" 
   onMouseOut="MM_nbGroup('out');"
   onMouseOver="MM_nbGroup('over','d33c_button_r2_c2',
    'd33c_images/d33c_button_r2_c2_f2.gif',
    'd33c_images/d33c_button_r2_c2_f4.gif',1);"
   onClick="MM_nbGroup('down','navbar1','d33c_button_r2_c2',
    'd33c_images/d33c_button_r2_c2_f3.gif',1);"
     target="extra" >
   <img name="d33c_button_r2_c2" 
     src="d33c_images/d33c_button_r2_c2.gif" 
     width="69" height="25" border="0">
</a>
</td>

Objects Become Bitmaps

Buttons are vector objects when they're created in Fireworks. That makes them easier to manipulate

When any image, including a button, is stored for the Web, it has to be either a GIF or a JPEG. These are both bitmap formats, so when Fireworks exports a button, it creates a GIF or JPEG version. You can determine which of these two to use in the Optimize tab before exporting your button.

Layers are Flattened

GIF and JPEG file formats also lack the ability to preserve separate layers, so images created with layers are "flattened" when they are exported.

Always save your Fireworks PNG files! You'll need them to make changes to your graphics, since the exported versions are difficult or impossible to edit.

Your PNG files should not be put on the Web server - they're too big and bulky, and they can't be viewed by browsers. So it's smart to save them in a different directory than the one you use for files that go on the Web.

Slices become Files

This illustration shows how Fireworks organizes the slices it makes when you create a button with the Button Editor.

Each row and column is numbered, somewhat like the rows and columns of a spreadsheet. Each part of the picture is identified by its row and column position.

When you export your file, Fireworks saves each sliced part into a separate file, named automatically by taking the original file name (button.png in this example) and adding the row and column numbers separated by underscores. Of course, these files must be either GIF or JPEG - in this example, they are GIFs.

Each of the four rollover states - Up, Over, Down, and Over While Down - has its own file too. These are handled by Fireworks like frames in an animation. Each state is a different frame. You can see these if you look in the Frames tab in Fireworks. The exported image file for each frame is named by adding its frame number after the row and column number of the cell where it is to appear.

Files are put into HTML Tables

Active Areas are Interpreted by JavaScript