Re-creating buttons is pretty easy. There's no real coding that goes behind an image button, you just put a hyperlink around an image and there you go. This is not really an object oriented lesson but I stuck it here to go along with the Radio and Checkbox lessons. But remember in the 4.0 browsers you have the onMouseDown and onMouseUp events at your disposal - so why not use them to make your buttons more interesting?

What I've done is created 2 images for the state of my button:

button0.gif (off)
button1.gif (on)

And I have to preload both images so that I can swap them:

function preload(imgObj,imgSrc) {
	eval(imgObj+' = new Image()')
	eval(imgObj+'.src = "'+imgSrc+'"')

Then I have a layer which displays the "off" button in a layer called "surveyDiv", and the onMouseDown, onMouseUp, and onMouseOut events to change the image accordingly, and the submitForm() will be a function that retrieves and outputs the data from my "virtual" form.

<DIV ID="surveyDiv">
<P><A HREF="javascript:submitForm()"
<IMG NAME="submitImg" SRC="button0.gif" WIDTH=68 HEIGHT=20 ALT="Submit" BORDER=0></A>

The onMouseOut is to correct the same problem as seen in the Mouse-Click Animation lesson

I am using my changeImage() function to swap the images so that function must also be in there.

View buttons1.html for a button example.

Home Next Lesson: Radio Buttons
copyright 1998 Dan Steinman

Casa de Bender