Buttons

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. 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+'"')

}

preload('button0','button0.gif')

preload('button1','button1.gif')

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()"

onMouseDown="changeImage('surveyDiv','submitImg','button1')"

onMouseUp="changeImage('surveyDiv','submitImg','button0')"

onMouseOut="changeImage('surveyDiv','submitImg','button0')">

<IMG NAME="submitImg" SRC="button0.gif" WIDTH=68 HEIGHT=20 ALT="Submit" BORDER=0></A>

</DIV>

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.

Custom Forms:
Buttons
Radio Buttons
Checkboxes
Select Lists

Home Next Lesson: Scroll Object
copyright 1998 Dan Steinman