Dhtml

Buttons

Shortcuts

Overview
Part 1
Part 2
Part 3

Overview

This tutorial will teach you how to create clickable buttons on your HTML pages using DHTML.

Part 1

The first step involves creating the images that will represent your buttons. You may use your favourite image editing program (for example, Adobe Photoshop, Paintshop Pro or Microsoft Paint) to create the images. For each button, you must have three images -- one for the button's normal state, one for its highlighted state, and one for its depressed or clicked state.

The images in the table below were created using Microsoft Paint. Each row represents one button, with the columns representing that button's states.

Button Name	Normal	Highlighted	Clicked
Left
Right
Up
Down
All

Part 2

Now you must write the JavaScript functions which will display the appropriate image for any state of the button. You can do this with two functions -- one which highlights and unhighlights the button, and one which clicks and unclicks it. The functions highlightButton() and clickButton(), below, demonstate this (nb: some of the lines are wrapped over the page so they fit on the screen, but you don't need to do this in your code, although it does make code more readable).

<SCRIPT language="JavaScript">
<!--

var imagePath = "http://members.tripod.com/~advstud/images/"
   /*
   ** imagePath is the full URL path to the stored images.
   */

function highlightButton(button)
   /*
   ** highlightButton(button) toggles button between a highlighted
   ** and an unhighlighted button.
   */
   {
      if (document.images[button].src == imagePath + button + ".gif") {
         document.images[button].src = imagePath + button + "_high.gif";
      } else { /* document.images[button].src == 
                     imagePath + button + "_high.gif" */
         document.images[button].src = imagePath + button + ".gif";
      }
   }

function clickButton(button)
   /*
   ** clickButton(button) toggles button between a clicked and an
   ** unclicked button.
   */
   {
      if (document.images[button].src == 
             imagePath + button + "_high.gif") {
         document.images[button].src = imagePath + button + "_click.gif";
      } else { /* document.images[button].src == 
                     imagePath + button + "_click.gif" */
         document.images[button].src = imagePath + button + "_high.gif";
      }
   }

// -->
</SCRIPT>

Part 3

Now you must assign the functions to the appropriate event handlers of the IMG tags. Use the examples below as a guide for implementing this:

<IMG src="../images/left.gif" id="left" 
   onMouseOver=highlightButton('left') onMouseOut=highlightButton('left') 
   onMouseDown=clickButton('left') onMouseUp=clickButton('left')><BR>
<IMG src="../images/right.gif" id="right" 
   onMouseOver=highlightButton('right') onMouseOut=highlightButton('right') 
   onMouseDown=clickButton('right') onMouseUp=clickButton('right')><BR>
<IMG src="../images/up.gif" id="up" 
   onMouseOver=highlightButton('up') onMouseOut=highlightButton('up') 
   onMouseDown=clickButton('up') onMouseUp=clickButton('up')><BR>
<IMG src="../images/down.gif" id="down" 
   onMouseOver=highlightButton('down') onMouseOut=highlightButton('down') 
   onMouseDown=clickButton('down') onMouseUp=clickButton('down')><BR>
<A href="javascript:alert('You can put the images inside <A></A> tags so 
   that the buttons actually do something.')">
   <IMG src="../images/all.gif" border="0" id="all" 
   onMouseOver=highlightButton('all') onMouseOut=highlightButton('all') 
   onMouseDown=clickButton('all') onMouseUp=clickButton('all')></A>

And the final result will look something like this (move the mouse over each button and click on it):

Previous Tutorial
Go back
Next Tutorial