Sample Code

Web Site Pushbutton

This sample code shows how to create pushbuttons for your Web site pages. The user can mouse over the pushbutton and click on it. When they do so, the button is momentarily depressed while the link attached to it is followed. We also show you how to create the buttons themselves.

Creating Pushbutton Images

To implement a pushbutton, you need two images, one showing the button in the up or unpressed position and the other showing it in the down or pressed position. Start with two images that have a background color of your choosing, with shaded edges. Study the two examples below to make your buttons.

	The button in its up position has a lighter colored border to its left and top (here white) and a darker colored border to its right and bottom (here dark gray).
	The button in its down position has the darker colored border to its left and top (here dark gray) and the lighter colored border to its right and bottom (here white).

We have assumed, in creating these images, that the light source is from the top/left corner of the page. If you use some other illumination standard, adjust the shadows accordingly. However, the top/left corner is pretty much an accepted standard. The one-pixel black border outlines the pushbutton. The light and dark colors used for the highlights and shadows should be the same hue as the button background but lighter and darker. If you don't use white and gray, you'll have to mess around with the colors a bit.

Download the two images and adjust their size, according to your needs. While you are editing the images, you'll want to set their mode to RGB. This will allow you to pick any colors that you want for the buttons and the images on them. Once you are all done editing the buttons, convert them to indexed color and save them as a GIF for the minimum amount of storage usage and shortest download time.

Adorn the button top with whatever text or icon you want it to have. Start with the up button and place the text or exactly in the middle. It is best if there are two or three pixels of button top showing all around the text or icon. Make an exact copy of the text/icon and paste it onto the button top of the depressed button. Displace it three pixels to the right and two pixels downwards (this makes the text/icon appear to move down when the button is pressed). As we said above, convert the button to indexed color and save it as a GIF. Here is an example:

	The button in its up position has the text/icon centered. Love that SP font!
	The button in its down position has the text/icon shifted left two or three pixels (three if it will fit on the button) and down two pixels.

Pushbutton JavaScript

Here is the JavaScript code that we use to display pushbuttons on a Web page. Pressing the button will cause the link associated with it to be followed. Additionally, if JavaScript is not enabled for the browser viewing the page, you will not get the button press but the link will still be followed.

<script type="text/javascript" language="JavaScript1.1">
<!-- Hide the JavaScript from robots so that they index properly

var ClockID = 0;

function PressButton(Button)
{
if (document.images)
  {
  // If the button is pressed, clear the timer and unpress it.
  if (ClockID)
    {
    document.images['Button'+Button].src
      = MyButtons[(Button-1)*2].src
    clearTimeout(ClockID);
    ClockID  = 0;
    }
  // If the button isn't pressed, press it and set the timer to
  // unpress it.
  else
    {
    document.images['Button'+Button].src
      = MyButtons[((Button-1)*2)+1].src
    ClockID = setTimeout("PressButton("+Button+")", 200);
    }
  }
}

var MyButtons = new Array();

function PreLoadButtons()
{
for (i=0;i<PreLoadButtons.arguments.length;i++)
  {
  MyButtons[i] = new Image()
  MyButtons[i].src = PreLoadButtons.arguments[i]
  }
}

// List of buttons for onClick button presses.  Two button
// pictures for each button (up picture and pressed picture),
// in order of button numbers.
PreLoadButtons(
  "Samp_Button_Home_Up.gif", "Samp_Button_Home_Down.gif")

// -->
</script>

Invoking the Pushbutton

To invoke the pushbutton in an HTML document, you need to insert a link at the point where you want the button to appear. The link should point to the page where you want the button to take you. The link should surround an image tag that points to the unpressed button image. The "onClick" handler of the link should invoke "PressButton" with the button number as the argument.

The image should have a name of "Buttonx" where "x" is the button number (numbered sequentially, starting at 1). It should have no border (you won't like it, otherwise) and an alternate tag of "" (unless you want an annoying alternate to pop up when the user mouses over the button). Here's how to invoke the button to take the user to the home page:

<a href="../index.html" onClick="PressButton(1)">
  <img src="Samp_Button_Home_Up.gif" name="Button1" border=0 alt=""></a>

Even if you just want the button press to execute some JavaScript and don't want it to follow a link, you must still include a link in the HTML. This is the only way to reliably capture the onClick event, since it doesn't work for images. However, don't despair. Simply add the following routine to your JavaScript block:

function NoWhere()
{
}

Then, to place the button in the HTML, use the following link to nowhere:

<a href="javascript:NoWhere()" onClick="PressButton(1)">
  <img src="Samp_Button_Home_Up.gif" name="Button1" border=0 alt=""></a>

OK, now that we've seen how to create a button, actuate it with JavaScript and place it in a document, let's put it all together to see how it works. The code above is used to operate the button we just designed.

Pressing the button should take you home.