<<< HOME

BUTTONS, LINKS & ROLLOVERS

WHAT IS A BUTTON? A LINK? A ROLLOVER?

      1) YOU ALREADY KNOW WHAT A LINK IS.
You now know that a link can open another page of your site in a browser, download music or video, or take you to another site on the Web.
      2) A BUTTON IS A GRAPHIC ELEMENT THAT SERVICES A LINK.
A "button" is a graphic (or two) that mimics a simple machine we use everyday: a pushbutton. Think how many of those you use everyday. Typing at my keyboard, I'm using a type of pushbutton. When I grind my coffee, I hold down a button to get the blades whirring. When I change channels on my car radio, I push a button. Invariably, a button graphic services a link, same as a hyperlink.
      3) A ROLLOVER IS AN INTERACTIVE BUTTON.
The main difference between a simple button and a rollover is that a rollover is at least TWO IMAGES. The code placed on one button graphic senses the presence of the user's mouse, and switches in a second image. Usually, this gives the illusion of a "change" in the first graphic, but it really is done with two separate pictures. Like this:      

 

ROLLOVER BUTTONS START IN PHOTOSHOP

Since buttons are images, they have to be made in a image-creation program of one sort or another: usually Photoshop.

  • First you make a file your buttons will be made from.
  • Then you make at least two layers, one for the mouseover image and one for mouseout.
  • When drawing your shapes, use the marquee tools and fill don't use the shape tools!
  • With the appropriate image showing, you save in a compression scheme: JPEG, GIF or PNG.
  • Save these by going File > Save for the Web
  • You save these images to a file on your site.

DREAMWEAVER ASSEMBLES THE ROLLOVER

To use Dreamweaver to assemble a rollover for you, you must:

  • Know where your two images are stored on your site.
  • Be ready with a link the button will anchor to.
  • Be ready to name the image something.
  • Have your nav bar ready by creating a table with one row and the number of cells you have pages to link to (plus one for "home".
    OK, now to build the button:
  • Click inside the first cell of your button bar/ nav bar/ table.
  • Go Insert > Interactive Image > Rollover Image.
  • In the dialogue box: name the image.
  • In the dialogue box: browse for the original image.
  • In the dialogue box: browse for the rollover image.
  • In the dialogue box: check "Preload Images".
  • In the dialogue box: write an "alt" tag that describes the destination page.
  • In the dialogue box: write the URL of the destination page.
  • Repeat for other buttons.
NOTE: Take a look at the code for what Dreamweaver has done. At the site of the button, you'll find a bunch of code that gives instructions for the anchor reference (a href) and URL of the destination page, for what image is to be shown first, and which is to be loaded on rollover. BUT THIS IS NOT ALL THERE IS TO THE ROLLOVER. Now check up in the "head" portion of the page, and you will see a bunch of code between <script> and </script> tags. This JavaScript is necessary if the script at the site of the button is to work. If you're copying the button to another page, you must also copy the head code to your new page. If your new page is in a different level of folder on your site, remember to re-address the images references.

THE NAVIGATION SCHEME

In a normal navigation scheme:

  • The left-most or top-most button takes the user back to the home page (index.htm).
  • The nav bar is on the same position on every page, so users don't have to search.
  • The buttons remain the same from page to page; when on the page it links to, usually that button is rendered useless.